# Bottom Sheet

What is a Bottom Sheet?

Bottom Sheets are like panels. But instead of coming from the left or the right they appear from the bottom.

Two different types

A bottom Sheet can be presented as a list (items are displayed in rows) or as blocks (items are displayed in floated square-blocks)

Demonstration

open as a list open as blocks

Sample-Code
Default list item as blocks:

    <div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet" data-animate="false" data-position='bottom' data-display="overlay">...</div>

List item as list:

    <div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet ui-bottom-sheet-list" data-animate="false" data-position='bottom' data-display="overlay">...</div>

Bottom Sheet Content

    <div class='row around-xs'>
    	<div class='col-xs-auto'>
    		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
    			<i class='zmdi zmdi-assignment zmd-2x'></i>
    			<strong>Clipboard</strong>
    		</a>
    	</div>
    	<div class='col-xs-auto'>
    		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
    			<i class='zmdi zmdi-fire zmd-2x'></i>
    			<strong>Hot Stuff</strong>
    		</a>
    	</div>
    	<div class='col-xs-auto'>
    		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
    			<i class='zmdi zmdi-cloud-outline-alt zmd-2x'></i>
    			<strong>Cloud</strong>
    		</a>
    	</div>
    	<div class='col-xs-auto'>
    		<a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'>
    			<i class='zmdi zmdi-format-color-fill zmd-2x'></i>
    			<strong>Fillcolor</strong>
    		</a>
    	</div>
    </div>