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.
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.
- Raised surface
- Header container
- Scrim (optional)
- Backstack affordance — Quick action button (optional)
- Heading — Small heading
- Compact button — Caption (optional)
- Close affordance — Quick action button (optional)
- 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.
- Raised surface
- Step indicator — Quick action button (avatar) (optional)
- Drawer open/close affordance — Quick action button
- Step indicator label — Quick action button (Caption) (optional)
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
Side sheets have padding of ∆spacingPlatformBig (40px).. All other content spacing is defined at the atom or component level.
Simple (with back button)
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).
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.
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.
- Header pre-scrolling
- Header post scroll
- Footer pre-scrolling
- 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.
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.
Developer DocsVue Developer Docs
Component documentation coming soon!