Drawer

A slide-in panel built on the native <dialog> element. The close button floats at the top right. Default border radius is 2px — use rounded-* utilities to override. Slides from the end (right) by default, with --start and --bottom direction modifiers.

Default drawer

index.htmlhtml
<dialog class="ln-drawer" data-ln-dismissible open>
  <button class="ln-drawer__close" data-ln-dismiss aria-label="Close">&times;</button>
  <div class="ln-drawer__header">
    <h3 class="ln-drawer__title">Drawer title</h3>
  </div>
  <div class="ln-drawer__body">
    <p>Drawer body content goes here. It scrolls when the content overflows the available height.</p>
  </div>
  <div class="ln-drawer__footer">
    <button class="ln-button ln-button--ghost">Cancel</button>
    <button class="ln-button ln-button--solid">Save changes</button>
  </div>
</dialog>

Drawer title

Drawer body content goes here. It scrolls when the content overflows the available height.

Reference

ClassDescriptionResponsive
.ln-drawerDrawer container (applied to <dialog>)No
.ln-drawer__closeClose buttonNo
.ln-drawer__headerHeader with bottom borderNo
.ln-drawer__titleDrawer headingNo
.ln-drawer__bodyScrollable body areaNo
.ln-drawer__footerFooter with top borderNo
.ln-drawer--startSlide in from the leftNo
.ln-drawer--bottomSlide up from the bottomNo
.ln-drawer--sm320px widthNo
.ln-drawer--md400px width (default)No
.ln-drawer--lg560px widthNo