Skip to content
Related Articles

Related Articles

Blaze UI Drawers

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
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’ll see drawers in Blaze UI. The drawers are the slide menus that are used in web applications. It provides a special layout for card elements.

Blaze UI Drawers Classes:

  • o-drawer: This class is used to create a drawer in Blaze UI.
  • o-drawer-visible: This class is used to make the drawer visible in Blaze UI and If you don’t want to make the drawer visible, just remove this class from the <aside> tag.

Blaze UI Drawers:

Syntax:

<div aria-hidden class="c-overlay c-overlay--dismissible"></div>
<aside aria-label="Demo drawer" aria-expanded 
    class="o-drawer o-drawer--top o-drawer--visible">
  <div class="c-card">
    <header class="c-card__header">
      <h2 class="c-heading">
        Main header
        <div class="c-heading__sub">Sub header</div>
      </h2>
    </header>
    <div class="c-card__body">
      Drawer content goes here...
    </div>
    <footer class="c-card__footer">
      <div class="c-input-group">
        <button class="c-button c-button--block">
            Button
        </button>
      </div>
    </footer>
  </div>
</aside>

Note: To make the drawer appear on the website and disappear, then change the .o-drawer–visible modifier in the <aside> tag.

Example 1: Below example demonstrates the drawer.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"/>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0"/>
    <title>Blaze UI</title>
    <link rel="stylesheet"
          href=
</head>
<body style="background-color: rgb(145, 242, 145);">
    <div class="u-centered">
        <h1 style="color: white">GeeksforGeeks</h1>
        <h2>Drawers in Blaze UI</h2>
    </div>
    <img class="o-image"
         src=
        style="width: 500px; height: 500px;
        margin-left: auto; margin-right: auto;
        display: block;"/>
    <div aria-hidden class="c-overlay
            c-overlay--dismissible">
    </div>
    <aside aria-label="Demo drawer"
           aria-expanded
           class="o-drawer u-highest
                  o-drawer--right
                  o-drawer--visible">
        <div class="c-card">
            <header class="c-card__header">
                <h1 class="c-heading">
                    GFG Courses
                    <div class="c-heading__sub"
                        style="color: green">
                        Buy Courses
                    </div>
                </h1>
            </header>
            <div class="c-card__body">
                Find courses on ReactJS, Data structures
                and algorithm, Fork Java, etc.
            </div>
            <footer class="c-card__footer">
                <div class="c-input-group">
                    <button class="c-button c-button--block
                    c-button--info">
                        Buy
                    </button>
                    <button class="c-button c-button--block
                    c-button--success">
                        Share
                    </button>
                </div>
            </footer>
        </div>
    </aside>
</body>
</html>


Output:

 

Example 2: Below example demonstrates the drawers at the bottom position.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"/>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0"/>
    <title>Blaze UI</title>
    <link rel="stylesheet"
          href=
</head>
<body style="background-color: rgb(138, 236, 214)">
    <div class="u-centered">
        <h1 style="color: white">GeeksforGeeks</h1>
        <h2>Drawers in Blaze UI</h2>
    </div>
    <div aria-hidden class="c-overlay
            c-overlay--dismissible">
      </div>
    <aside aria-label="Demo drawer"
           aria-expanded class="o-drawer u-highest
                                o-drawer--bottom
                                o-drawer--visible">
        <div class="c-card">
            <header class="c-card__header">
                <h2 class="c-heading">
                    Welcome to GeeksforGeeks
                    <div class="c-heading__sub">
                        Learn more
                    </div>
                </h2>
            </header>
            <div class="c-card__body">
                GeeksforGeeks is a portal for geeks.
                It is a place where you can learn, share
                and get help from other geeks. Find
                various things on the portal like Jobs,
                Hackathons, Programming Competitions,
                Coding Questions, etc. You can also
                learn various things like programming
                lanaguages, algorithms, data
                structures, etc.
            </div>
            <footer class="c-card__footer">
                <div class="c-input-group">
                    <button class="c-button c-button--block
                    c-button--warning">
                        Visit
                    </button>
                    <button class="c-button c-button--block
                    c-button--success">
                        Sign Up
                    </button>
                    <button class="c-button c-button--block
                    c-button--info">
                        Log In
                    </button>
                </div>
            </footer>
        </div>
    </aside>
</body>
</html>


Output:

 

Reference: https://www.blazeui.com/objects/drawers/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!