Bottom sheet

The bottom sheet has two varieties: list and grid.

For the bottom sheet with a list all you need to do is use the following classes: .sheet .sheet--list

    
<div class="bottom-sheet bottom-sheet--list">
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">person</i>
        <div class="bottom-sheet__content">Persons</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud_download</i>
        <div class="bottom-sheet__content">Download</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud</i>
        <div class="bottom-sheet__content">Cloud</div>
    </a>
</div>
    

For the bottom sheet with a grid all you need to do is use the following classes: .sheet .sheet--grid

    
<div class="bottom-sheet bottom-sheet--grid">
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">person</i>
        <div class="bottom-sheet__content">Persons</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud_download</i>
        <div class="bottom-sheet__content">Download</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud</i>
        <div class="bottom-sheet__content">Cloud</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">person</i>
        <div class="bottom-sheet__content">Persons</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud_download</i>
        <div class="bottom-sheet__content">Download</div>
    </a>
    <a class="bottom-sheet__item">
        <i class="material-icons icon bottom-sheet__icon">cloud</i>
        <div class="bottom-sheet__content">Cloud</div>
    </a>
</div>