Skip to content
Related Articles

Related Articles

Blaze UI Basket Example

Improve Article
Save Article
  • Last Updated : 03 Aug, 2022
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!