Skip to main content

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

AttributeDescription
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().

MethodDescription
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>