Bottom sheets

Showcasing MICL bottom sheets

Showcase

Click a button to open one of the MICL bottom sheets.

Send

John
John Reeves
Carol
Carol Glass
Bill
Bill Graves
Knut
Knut Steen
City Album

City Sleepers Various artists

pause skip_next
  • Share
  • Get link
  • Edit name
  • Share
  • Get link
  • Edit name

Send

John
John Reeves
Carol
Carol Glass
Bill
Bill Graves
Knut
Knut Steen

Code example

<dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
  <div class="micl-bottomsheet__headline">
    <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
  </div>
  <div class="micl-bottomsheet__content">
    <ul class="micl-list" role="listbox">
      <li class="micl-list-item-one" tabindex="0">
        <span class="material-symbols-outlined micl-list-item__icon">share</span>
        <span class="micl-list-item__text">
          <span class="micl-list-item__headline">Share</span>
        </span>
      </li>
      <li class="micl-list-item-one">
        <span class="material-symbols-outlined micl-list-item__icon">edit</span>
        <span class="micl-list-item__text">
          <span class="micl-list-item__headline">Edit name</span>
        </span>
      </li>
    </ul>
  </div>
</dialog>