Sheets are surfaces containing content that are anchored to the bottom of the screen. Sheets are a repeated pattern, containing actions and text content, all within the user's reach.

They initially fill 3/4 of the screen, this is for reachability, ensuring all actions are within reach for the user.

# Closed

The image below shows an example of how a sheet can be opened.

Interacting with the Sort/Filter button opens the sheet and it fills 3/4 of the screen. The sheet animates in from the bottom of the viewport.

Content within the sheet can be scrolled while the header and bottom CTAs remain static.

Closed state

# Open

As the user scrolls up, the sheet expands to it's full state, filling the screen.

The close button no longer has a drop shadow and moves above the title to accomodate for longer titles.

Open state

# Open to Closed

The user can scroll through the card content, they can also interact with any carousels, buttons, and links within the card.

The sheet must be dismissed by the user, this can be done by using the close button, interacting with the overlay or using a link within the sheet.

Open to Closed

# Large

For large screens, sheets behave in a slightly different way.

Rather than coming in from the bottom, the animate in from the right of the viewport.

Users can scroll through sheet content but there is only one state.

Large

# Rules

Do

  • Follows the same pattern as other sheets (e.g. make sure they animate from the same direction)
  • Make the sheet content valuable to the user, do not lead them to a dead end.

Don't

  • Don't allow for horizontal scrolling, exceptions to this include carousels and containers (such as filters)
  • Don't use sheets as a content dump. Remember, information must be valuable to the user.

# Structure

For mobile, sheets are 100% of the screen width and fill 3/4 of the screen height.

For large screens, sheets are 100% of the screen height. It is 375px with the close icon button to the left of the sheet.

# Elevation and shadows

The overlay behind the sheet is 50% Black. In the 3/4 state, the Close Icon button has a 1pt elevation.

# Titles

Make sure to be descriptive when writing sheet titles.

To make sure the title doesn't clash with any other content, their is a limit of 35 characters.

Make sure to follow accessibility rules when adding buttons or links into sheets.

Last Updated: 10/6/2020, 8:34:39 AM