Side Sheet

Planned

A side sheet is used to overlay content on top of the user interface for the purpose of focusing the user’s attention on specific information or to accomplish a specific task. As a general rule, side sheets should provide contextually-relevant content to the parent view underneath. This component is designed only for the responsive web medium to large experiences. See this doc for the breakpoints. Anything that is considered “Mobile” will display a bottom sheet while “Tablet” and “Desktop” display the side sheet.

Side Sheet

Anatomy

The side sheet component is made up of a raised surface that contains content and affordances to close the side sheet. All other elements are optional. Side sheets come in two variants: simple and verbose.

Simple side sheet

Simple side sheets are raised above the surface and completely cover the context underneath. The "simple" aspect indicates the lack of an attached drawer.

  1. Raised surface
  2. Header container
  3. Scrim (optional)
  4. Backstack affordance — Quick action button (optional)
  5. Heading — Small heading
  6. Compact button — Caption (optional)
  7. Close affordance — Quick action button (optional)
  8. Content (just for reference)

Verbose side sheet

Verbose side sheets can include all the same elements of a simple side sheet, but also include a drawer to aid in multi-step flows contained within the side sheet.

  1. Raised surface
  2. Step indicator — Quick action button (avatar) (optional)
  3. Drawer open/close affordance — Quick action button
  4. Step indicator label — Quick action button (Caption) (optional)

Header

Side sheet headers can provide several controls depending on how the user might need to interact with side sheet content. Compact button provides a great way to surface controls related to the entire side sheet. A few examples are clearing out all form fields, or removing all filters. The backstack affordance serves as a way to step backward in a multi-step flow within a bottom sheet — similar to the mobile backstack paradigm.

When to use

Side sheets are useful for a wide variety of use-cases and can contain one or more atoms on their surface, and can be triggered as a result of user interaction or by system request. Some examples of side sheet usage:

  • Providing quick access to contextual controls
  • Surfacing contextual interaction options
  • Surfacing interstitial content with medium emphasis
  • Revealing large quantities of categories or options that would otherwise clutter the parent experience underneath

Side sheet drawers could be used for:

  • Multistep processes that require quick navigation to move forward and backwards within a multistep process
  • Display the success or failure of individual steps within a multistep process

When not to use

Side sheets should not be used when:

  • The content makes more sense existing within the current view
  • The interaction is initiated by a card component (in which case the card should grow to show additional content instead of triggering a side sheet)
  • There is no contextually useful information or interactions displayed

Side sheet drawers should not be used:

  • When simpler UI controls could accomplish the same goal
  • To link to other features on the platform that are out of context of the side sheet

Specs

Color

Element Property Value
Raised surface Background color ∆surfacePlatformRaisedBackgroundColor
Heading Type color ∆colorPlatformGray900
Raised surface Shadow color ∆surfacePlatformRaisedShadowColor
Quick action button (Full screen variant) Container color ∆colorBrandedAffordance50
Quick action button (Full screen variant) Icon color ∆colorBrandedAffordanceAccessible
Scrim Scrim color ∆colorPlatformWhite ∆colorPlatformAlpha100

Elevation

Element Property Value
Raised surface Shadow Y-offset ∆surfacePlatformRaisedShadowY
Raised surface Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Raised surface Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Raised surface Shadow spread ∆surfacePlatformRaisedShadowSpread

Spacing

Side sheets have padding of ∆spacingPlatformBig (40px).. All other content spacing is defined at the atom or component level. 

Simple (with back button)

Heading wrapped

Drawer (expanded)

Drawer (collapsed)

Footer


States

Header content

The image below is just for an example, but the actual states are defined on the nested components’ level (Quick Action Button, and Compact Button in this example).

Drawer


Theming

Type

Element Property Value
Small Heading Font family ∆typeBrandedSmallHeadingFontFamily
Small Heading Font weight ∆typeBrandedSmallHeadingFontWeight
Small Heading Character spacing ∆typeBrandedSmallHeadingCharacterSpacing
Small Heading Text transform ∆typeBrandedSmallHeadingTextTransform

Placement

Side sheets should always be anchored to the right side of the viewport, and are either open fully or closed fully. The drawer available in the verbose side sheet can be expanded or collapsed independent from the parent side sheet container.

Behavior

Side sheet scrolling

Headers and footers are pinned to the top and bottom of the viewport, and should only appear as a raised surface when content is scrolled underneath. Shadows cast by the header and footer should be masked at the left and right edge so as not to double-up or interfere with the shadow of the side sheet surface.

  1. Header pre-scrolling
  2. Header post scroll
  3. Footer pre-scrolling
  4. Footer post scroll

Entrance & exit

Once the side sheet enters view, the drawer becomes available for interaction. Collapsing the drawer does not collapse the entire side sheet.

Interaction Steps Duration Easing Notes Haptics
Entrance 1. Move in ∆motionTimeFast ∆motionPlatformEasingDeceleration The side sheet enters the view.
Exit 1. Move out ∆motionTimeFast ∆motionPlatformEasingAcceleration The side sheet exits the view.


Drawer opening & closing

Note: If you want to close the sheet, you click on the scrim or click on the close affordance. If there is no scrim present, then the interactions outside the side sheet should still be possible.

Interaction Steps Duration Easing Notes Haptics
Open 1. Open ∆motionTimeFast ∆motionPlatformEasingStandard The side sheet navigation expands/opens.
Close 1. Close ∆motionTimeFast ∆motionPlatformEasingStandard The side sheet navigation retracts/closes.


Developer Docs

Vue Developer Docs

Component documentation coming soon!