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 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
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