Drawers

Slide in menus. Drawers provide a special layout for cards.

<blaze-drawer position="right" open>
  <blaze-card>
    <blaze-card-header>
      <h2 class="c-heading u-xlarge">
        Heading
        <div class="c-heading__sub">Sub-heading</div>
      </h2>
    </blaze-card-header>
    <blaze-card-body>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
      </p>
    </blaze-card-body>
    <blaze-card-footer>
      <div class="c-input-group">
        <button class="c-button c-button--block c-button--brand">Button</button>
        <button class="c-button c-button--block c-button--info">Button</button>
      </div>
    </blaze-card-footer>
  </blaze-card>
</blaze-drawer>

Attributes

Attribute	Description
open (boolean)	Initial open/close state of the draw
dismissible (boolean)	Allow the drawer to be closed by clicking on the overlay
position="top\|right\|bottom\|left"	Set which border the drawer appears from

Methods

To access public methods on the element first select it using document.querySelector().

Method	Description
show()	Opens the drawer
close()	Hides the drawer
isOpen()	Promise<true or false>

CSS

To make the drawer appear and disappear toggle the .o-drawer--visible modifier.

<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">
        Heading
        <div class="c-heading__sub">Sub-heading</div>
      </h2>
    </header>
    <div class="c-card__body">
      This is a drawer
    </div>
    <footer class="c-card__footer">
      <div class="c-input-group">
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
      </div>
    </footer>
  </div>
</aside>

Positions

.c-drawer--top, .c-drawer--right, .c-drawer--leftand .c-drawer--bottom modifiers are all available.

.o-drawer--left

<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">
        Heading
        <div class="c-heading__sub">Sub-heading</div>
      </h2>
    </header>
    <div class="c-card__body">
      This is a drawer
    </div>
    <footer class="c-card__footer">
      <div class="c-input-group">
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
      </div>
    </footer>
  </div>
</aside>

.o-drawer--bottom

<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">
        Heading
        <div class="c-heading__sub">Sub-heading</div>
      </h2>
    </header>
    <div class="c-card__body">
      This is a drawer
    </div>
    <footer class="c-card__footer">
      <div class="c-input-group">
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
      </div>
    </footer>
  </div>
</aside>

.o-drawer--right

<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">
        Heading
        <div class="c-heading__sub">Sub-heading</div>
      </h2>
    </header>
    <div class="c-card__body">
      This is a drawer
    </div>
    <footer class="c-card__footer">
      <div class="c-input-group">
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
        <button class="c-button c-button--block">Buy</button>
      </div>
    </footer>
  </div>
</aside>