Bottom sheet

A bottom sheet offers a great deal of flexibility regarding what it can hold. There are however certain specifications to follow.

Overview

A. Bottom sheet container
B. Header
C. Drag handle (if resizable)
D. Title (optional)
E. Close action (modal only)
F. Content area
G. Footer (optional)
H. Scrim (Modal only)

Measurements

Top Margin

36px

Width

Full width, up to max-width 720 px

Height

Variable

Header

Drag handle

• Padding top

  12px

Title

• Padding top

  12px

Close and collapse action

• Padding right

  12px (xs, s, am), 24px (m, l, xl)
• Padding bottom

  24px (with title), 12px (without title)

Content

The content placed in the primary content area should have padding added to the right and left side. This can be ignored if objects require vertical scroll and if a picture is placed within the header and spans the entire width. Additionally, if a picture is used in the header, the title will be visible in the content area in the bottom sheets starting position.

Padding

• Padding right

  12 px (xs, s, am), 24 px (m, l, xl)
• Padding left

  12 px (xs, s, am), 24 px (m, l, xl)

Picture in header

Picture can be inserted into the header. The picture will have full with and a will keep a 16:9 ratio. If, however, the content are scrolled, the header will decrease it’s height to 72 px keeping the picture aligned bot within. A gradient is used when the picture is fully visibly and will move over to an overlay as content is scrolled behind the header.

1. Collapsed

• Width

  Full
• Ratio

  16:9

2. Expanded - Starting position

• Width

  Full
• Ratio

  16:9

3. Expanded - Content scrolled

• Width

  Full
• Height

  72 px

Footer

Padding right

12 px (xs, s, am), 24 px (m, l, xl)