Blaze UI Drawers Positions
Last Updated :
28 Apr, 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’ll see drawer’s positions in Blaze UI. The drawers are the slide menus that are used in web applications. There are four positions given in Blaze UI for defining a drawer object, and these are: .c-drawer–top, .c-drawer–right, .c-drawer–left and .c-drawer–bottom.
Blaze UI Drawers Positions classes:
- o-drawer–left- This class is used to create a left positioned drawer in Blaze UI.
- o-drawer–right- This class is used to create a right positioned drawer in Blaze UI.
- o-drawer–top- This class is used to create a top positioned drawer in Blaze UI.
- o-drawer–bottom– This class is used to create a bottom positioned drawer in Blaze UI.
Syntax:
<div aria-hidden class="c-overlay c-overlay--dismissible"></div>
<aside aria-label="Demo drawer" aria-expanded
class="o-drawer o-drawer--bottom 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>
Example 1: Below example demonstrates the bottom positioned 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(138, 236, 214)">
<div class="u-centered">
<h1 style="color: white">GeeksforGeeks</h1>
<h2>Drawers Position 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">
GeeksforGeeks
<div class="c-heading__sub">
Courses
</div>
</h2>
</header>
<div class="c-card__body">
This is a Left position drawer
created with Blaze UI.
</div>
<footer class="c-card__footer">
<div class="c-input-group">
<button class="c-button c-button--block
c-button--success">
Buy
</button>
</div>
</footer>
</div>
</aside>
</body>
</html>
|
Output:
Example 2: Below example demonstrates the top positioned 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(138, 236, 214)">
<div class="u-centered">
<h1 style="color: white">GeeksforGeeks</h1>
<h2>Drawers Position 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--top
o-drawer--visible">
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
GeeksforGeeks
<div class="c-heading__sub">
Jobs
</div>
</h2>
</header>
<div class="c-card__body">
This is a Top position drawer
created with Blaze UI.
</div>
<footer class="c-card__footer">
<div class="c-input-group">
<button class="c-button
c-button--block c-button--info">
Find Jobs
</button>
</div>
</footer>
</div>
</aside>
</body>
</html>
|
Output:
Example 3: Below example demonstrates the left positioned 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(138, 236, 214)">
<div class="u-centered">
<h1 style="color: white">GeeksforGeeks</h1>
<h2>Drawers Position 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--left
o-drawer--visible">
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
GeeksforGeeks
<div class="c-heading__sub">
Premium Portal
</div>
</h2>
</header>
<div class="c-card__body">
This is a Left position drawer
created with Blaze UI.
</div>
<footer class="c-card__footer">
<div class="c-input-group">
<button class="c-button c-button--block
c-button--success">
Practice
</button>
<button class="c-button c-button--block
c-button--info">
Premium
</button>
</div>
</footer>
</div>
</aside>
</body>
</html>
|
Output:
Example 4: Below example demonstrates the right positioned 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(138, 236, 214)">
<div class="u-centered">
<h1 style="color: white">GeeksforGeeks</h1>
<h2>Drawers Position 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--right
o-drawer--visible">
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
GeeksforGeeks
<div class="c-heading__sub">
Computer Science Portal
</div>
</h2>
</header>
<div class="c-card__body">
This is a Right position drawer
created with Blaze UI.
</div>
<footer class="c-card__footer">
<div class="c-input-group">
<button class="c-button c-button--block
c-button--success">
Sign Up
</button>
<button class="c-button c-button--block
c-button--warning">
Log In
</button>
</div>
</footer>
</div>
</aside>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/objects/drawers/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...