Drawers can come from any direction of the document. Use the following classes on drawers to determine the direction they should be exposed from.

• .drawer--left
• .drawer--right
• .drawer--top
• .drawer--bottom

Each drawer can optionally specify the breakpoint it should "hide" at. The sm, sm-md, md, md-lg, and lg breakpoints can be used. To specify a breakpoint for a drawer to hide at, add a data-hide-at="[breakpoint-name]" attribute to it.

Basic drawer from the left

Drawers are triggered by specifying the drawer ID in the data-drawer property.

<!-- Drawer Trigger -->
<div class="p-2">
	<button class="js-drawer-trigger btn btn--outline" data-drawer="drawer-1">
        <i class="fa fa-bars"></i>
    </button>
</div>

Drawers should go near the closing body tag.

<!-- Drawer -->
<div id="drawer-1" class="drawer js-drawer drawer--left z-modal" data-modal>
	<div class="fixed bg-white w-full h-16 top-0 z-shell flex justify-between items-center border-b border-gray-200">
		<div class="font-sans-medium pl-6 leading-none flex-grow">Drawer Header</div>
		<button class="js-drawer-close-btn self-stretch h-16 px-6 flex items-center cursor-pointer z-shell"><i class="fal fa-times"></i></button>
	</div>
	<div class="absolute inset-0 h-full pt-16 w-full overflow-y-scroll scrolling-touch">
		<!-- Any content can go here -->
		<div class="p-6">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet maiores, adipisci tempora non odit nam, numquam quam excepturi consectetur saepe illum culpa eaque nulla molestiae magnam? Quas consectetur explicabo tempore?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet maiores, adipisci tempora non odit nam, numquam quam excepturi consectetur saepe illum culpa eaque nulla molestiae magnam? Quas consectetur explicabo tempore?</p>
		</div>
	</div>
</div>

<div class="modal-overlay js-modal-overlay"></div>