Bottom sheet / modal usage

You can use the bottom sheet or bottom modal in a couple varieties. You can use the default, grid icons and header.

Default

If you click on the button you can see the default bottom sheet / modal in action.

		
<div class="bottom-sheet" id="default">
  <ul>
    <li><a href=""><i class="material-icons">cloud</i> Upload</a></li>
    <li><a href=""><i class="material-icons">home</i> Home</a></li>
    <li><a href=""><i class="material-icons">print</i> Print</a></li>
  </ul>
</div>
		
	

Header

If you click on the button you can see the header bottom sheet / modal in action.

		
<div class="bottom-sheet" id="header">
  <ul>
    <li class="bottom-sheet-header">Header</li>
    <li><a href="#"><i class="material-icons">cloud</i> Upload</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="material-icons">home</i> Home</a></li>
    <li><a href="#"><i class="material-icons">print</i> Print</a></li>
  </ul>
</div>
		
	

Grid

If you click on the button you can see the grid bottom sheet / modal in action.

home
Example 1
cloud
Example 2
cached
Example 3
		
<div class="bottom-sheet-grid" id="grid-icons">
  <div class="row">
    <div class="grid-item">
      <div class="grid-icon">
        <i class="material-icons">home</i>
      </div>
      <div class="grid-content">Example 1</div>
    </div>

    <div class="grid-item">
      <div class="grid-icon">
        <i class="material-icons">cloud</i>
      </div>
      <div class="grid-content">Example 2</div>
    </div>

    <div class="grid-item">
      <div class="grid-icon">
        <i class="material-icons">cached</i>
      </div>
      <div class="grid-content">Example 3</div>
    </div>
  </div>

  <div class="row">
    <a href="#" class="grid-item">
      <div class="grid-icon">
        <i class="material-icons">save</i>
      </div>
      <div class="grid-content">Example 7</div>
    </a>
  </div>
</div>
		
	

Grid header

The grid also provides a header and divider.

Header
home
Example 1
cloud
Example 2
cached
Example 3

Settings

Variable Options Result
$bottom-sheet-background Color / variable Changes the background color
$bottom-sheet-font-color Color / variable Changes the font color
$bottom-sheet-header-font-color Color / variable Changes the font color of a title / header
$bottom-sheet-icons-color Color / variable Changes the icon color