Drawers are used for revealing content on-the-fly without leaving the current page. At their core, they are nothing more than a fixed width panel that opens up from one side of the screen:

When referring to a drawer we will most often refer to the web version which opens from the right side of the screen on our web application. Much like the dropdown, it has no padding and can take any type of content, though most often it will contain a card.

Anatomy

  1. Overlay
  2. Body
  3. Header
  4. Footer (optional)

https://invis.io/R5YFHI7Z38S#/428588933_Drawer_-_Anatomy

Content

Since at their core they are just a blank card, they can contain anything but most often they have at least a card header and body. Drawers can be closed by either pressing the X button or the ESC key.

<aside> 🔸 Note: For handling content scrolling in drawers, see the card component.

</aside>

https://invis.io/V6ZIBF5HCPD#/428601196_Drawer_-_Card