Drawer

A classic drawer overlay, in which you can include any content you want. It works best in mobile view as a complimentary component to modal and can be used for making pop-up windows.

To use the drawer component, you need to make use of four classes, drawer, drawer__background, drawer__content and drawer__close.

Use drawer__background outside the drawer classes for overlay effect. Add any content you want inside drawer__content, also use padding classes as per your needs. Enter a value from top | bottom | left | right to set the direction of the drawer to pop from.

Use drawer__open to control the dynamic behaviour of the drawer.

<div class="drawer__background"></div>
<div class="drawer flex-ct-ct">
<div class="drawer__content md-s" wide="20">
    <h1 class="sm">drawer</h1>
    <p class="sm">...</p>
  </div>
<span class="drawer__close">
  <i class="fas fa-times-circle"></i>
</span>
</div>