Updated: November 7, 2020
Version 0.7
Bottom Sheet
Intro
Bottom sheets are containers with supplementary content that is located at the bottom of the screen.

Principles
- Bottom sheets contain content that supplements the screen’s primary UI region.
- Bottom sheets can display a wide variety of content and layouts.
- Bottom sheets are easy to access on mobile.
Types
Modal bottom sheets are primarily used on mobile. However, there is also a bottom sheet solution on tablet.
Structure
Modal Bottom Sheet – List View
Modal bottom sheets are alternatives to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed to interact with the underlying content.

A. Header
B. List of Actions
C. Divider Line


Modal bottom sheet list view
Modal Bottom Sheet – Grid View
Modal bottom sheets can display a wide variety of content and layouts. This can range from menu items (in list and grid layout) to supplemental content laid out according to the layout grid.

A. Header
B. Application List
C. Divider Line
D. Action List


Modal bottom sheet grid view
Specs
Modal Bottom Sheet – List View (Mobile)


Modal Bottom Sheet – List View (Tablet)


Modal Bottom Sheet – List View with Header (Mobile)


Modal Bottom Sheet – List View with Header (Tablet)


Modal Bottom Sheet – Grid View (Mobile)


Modal Bottom Sheet – Grid View (Tablet)


Modal Bottom Sheet – Grid View with Header (Mobile)


Modal Bottom Sheet – Grid View with Header (Tablet)


Sample | Element | Alpha Hex |
|
Background | #FFFFFF |
|
Text | #32363A |
|
Icons | #6A6D70 |
|
Divider | #EEEEEF |
|
App grid labels | #6A6D70 |
|
Scrim | #4D000000 or #000000 with 30% opacity |