Blaze UI Basket Example
Last Updated :
03 Aug, 2022
Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we will see an example basket. A basket is a collection of small information like a payment tab, cart, or wishlist.
Classes Used:
- o-container: This class is used to provide a container.
- o-container–medium: This class is used to create a medium-sized container.
- o-grid: This class is used to create a grids.
- o-grid__cell: This class is used to create the cells of the grid.
- o-grid__cell–width-65: This class is used to create the grid cell of width 65px.
- c-card: This class is used to create the card.
- u-high: This class is used to give minimum elevation to an element.
- c-card__header: This class is used to create the header of the card.
- u-xlarge: This class is used to make extra-large headings approx size 1.5em
- c-heading: This class is used to create the heading.
- c-heading__sub: This class is used to create the sub-heading.
- c-card__body: This class is used to create the body of the card.
- c-paragraph: This class is used to create the paragraph.
- o-fieldset: This class is used to create the fieldset on the card.
- o-grid–wrap: This class is used to define the grid.
- c-label: This class is used to create the label.
- o-form-element: This class is used to create the form element.
- c-field: This class is used to create the field.
- c-button: This class is used to create the button.
- c-button-block: This class is used to create the button block.
- c-button–success: This class is used to provide the color green to the button.
Example 1: In the below code, we will make use of the above classes to show the demonstration of baskets using Blaze UI.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< style >
body {
margin-bottom: 10px;
}
</ style >
</ head >
< body >
< center >
< div class = "o-container o-container--medium" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
</ div >
< div style = "margin-left:210px;" class = "o-grid" >
< div class = "o-grid__cell o-grid__cell--width-65" >
< div class = "c-card u-high" >
< header class = "c-card__header" >
< h3 class = "c-heading u-xlarge" >
Blaze UI basket
</ h3 >
</ header >
< div class = "c-card__body" >
< fieldset class = "o-fieldset" >
< div class = "o-grid o-grid--wrap" >
< div class = "o-grid__cell o-grid__cell--width-100" >
< label class = "c-label o-form-element" >
User Name
< input placeholder = "Santosh"
class = "c-field" >
</ label >
</ div >
< div class = "o-grid__cell o-grid__cell--width-100" >
< label class = "c-label o-form-element" >
Password
< input placeholder = "****"
class = "c-field" >
</ label >
</ div >
< div class = "o-grid__cell o-grid__cell--width-100" >
< label class = "c-label o-form-element" >
< button class="c-button c-button-block
c-button--success">
Login
</ button >
</ label >
</ div >
</ div >
</ fieldset >
</ div >
</ div >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Example 2: In the below code, we will make use of the above classes to show the demonstration of baskets using Blaze UI.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
</ head >
< body >
< div class = "o-container o-container--medium" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
</ div >
< div class = "o-grid__cell" >
< blaze-sticky class = "hydrated" >
< div style = "width:266px; height:446px; " >
< div style = "top:140px; left:210px; width:267px;" >
< div style = "background-color:lightgreen;"
class = "c-card u-high" >
< div role = "separator"
class = "c-card__item c-card__item--divider" >
Basket
</ div >
< div class = "c-card__item o-media" >
< div class = "o-media__image" >
< img class = "o-image u-rounded"
src =
alt = "GFG image" >
</ div >
< div class = "o-media__body" >
< h3 class = "c-heading" >
Course
< div class = "c-heading__sub" >
11,999
</ div >
</ h3 >
< p class = "c-paragraph" >
This product is good for GATE aspirants.
</ p >
</ div >
</ div >
< div class = "c-card__item o-media" >
< div class = "o-media__image" >
< img class = "o-image u-rounded"
src =
</ div >
< div class = "o-media__body" >
< h3 class = "c-heading" >
Another Course
< div class = "c-heading__sub" >
12,999
</ div >
</ h3 >
< p class = "c-paragraph" >
This Course is good for ISRO aspirants.
</ p >
</ div >
</ div >
< div class = "c-card__item" >
< button class="c-button c-button--block
c-button--brand">
Continue shopping
</ button >
</ div >
</ div >
</ div >
</ div >
</ blaze-sticky >
</ div >
</ body >
</ html >
|
Output:
Reference: https://www.blazeui.com/examples/basket/
Share your thoughts in the comments
Please Login to comment...