Vitreo
Components

Drawers

Panels from the side or the bottom

From the end

Code 
<button type="button" class="btn btn-primary" data-drawer-open="drw-end" aria-haspopup="dialog">Open drawer</button>
<div class="drawer glass" id="drw-end" hidden role="dialog" aria-modal="true" aria-labelledby="drw-end-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-end-title">Filters</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <form id="drw-end-form">
      <div class="flex flex-col gap-3">
        <label class="check" for="f-0"><input class="checkbox" type="checkbox" id="f-0" checked><span>Paid</span></label>
        <label class="check" for="f-1"><input class="checkbox" type="checkbox" id="f-1" checked><span>Pending</span></label>
        <label class="check" for="f-2"><input class="checkbox" type="checkbox" id="f-2"><span>Overdue</span></label>
        <label class="check" for="f-3"><input class="checkbox" type="checkbox" id="f-3"><span>Draft</span></label>
      </div>
    </form>
  </div>
  <div class="drawer-foot">
    <button type="reset" class="btn btn-ghost" data-toast='{"title":"Filters reset","text":"Paid and Pending are ticked again.","tone":"info"}' form="drw-end-form">Reset</button>
    <button type="button" class="btn btn-primary" data-close>Apply</button>
  </div>
</div>

From the start

Code 
<button type="button" class="btn btn-gray" data-drawer-open="drw-start" aria-haspopup="dialog">Open from the start</button>
<div class="drawer glass drawer-start" id="drw-start" hidden role="dialog" aria-modal="true" aria-labelledby="drw-start-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-start-title">Navigation</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <ul class="list">
      <li>
        <a class="list-row" href="mail-inbox.html">
          <span>Inbox</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="chat.html">
          <span>Chat</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="calendar.html">
          <span>Calendar</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="files.html">
          <span>Files</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Bottom sheet

Good on phones.

Code 
<button type="button" class="btn btn-gray" data-drawer-open="drw-bottom" aria-haspopup="dialog">Open sheet</button>
<div class="drawer glass drawer-bottom" id="drw-bottom" hidden role="dialog" aria-modal="true" aria-labelledby="drw-bottom-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-bottom-title">Share</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <div class="flex items-center flex-wrap gap-3">
      <button type="button" class="btn btn-gray" data-copy="nearby"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Copy link</button>
      <a href="mail-compose.html" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Email</a>
      <a href="chat.html" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Message</a>
    </div>
  </div>
</div>
© Vitreo. All rights reserved.