Side sheet

Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.

Usage
Code
Interactions

Side sheets are significantly larger than the Modals and hence they can accommodate complex informations and interactions. This way a side sheet works as a sub page in itself while maintaining the context.

Sizes

Basis on the sizes and the amount of content they can accommodate, side sheets are of 2 types -




Regular

The default side sheet takes 6 columns in the grid and starts at just about halfway of the width of the screen.

Large

The large side sheet takes 10 columns in the grid and starts from left side of the screen.

Structure

PropertyValue(s)
Height100%
Margin
(top, right, bottom)
0px, 0px, 0px
Corner radius0px
Background colorNamak
ShadowShadow 30

Configurations



PropertyValue(s)Default value
Size
  • Regular
  • Large
  • Regular

    Usage


    Side sheet vs Page

  • Side sheets are used to present a great amount of information as a part of users’ primary task while maintaining the context with the background content. So if no context is required, go for a new page instead of a side sheet.
  • Side sheet should NOT be used as a replacement of a new page when the page needs to be accessible by a URL. Avoid showing a side sheet based on a URL.
  • Default vs Large side sheet

    The default side sheet covers most of the use cases but for the cases when the content is quite complex and needs a wider area, use the large variant.

    Default vs Large side sheet Default vs Large side sheet

    Position of action buttons

    The action buttons appear in the left side of the sheet and follows the reverse order as the modals to keep the position of primary action predictable. Also,

  • If the content covers >= 75% of the side sheet measured vertically, then the actions appear in the bottom, i.e, margin-bottom for the footer is 0px.
  • Actions appear in the bottom Actions appear in the bottom
  • If the content covers < 75% of the side sheet measured vertically, then the actions appear just beneath the content.
  • Actions appear just beneath the content

    Dividers

    Just like the modals, the dividers in the header and the footer should ONLY be shown when the content is scrollable.

  • When content is not scrollable
  • Dividers are hidden Dividers are hidden
  • When content is scrollable
  • Dividers are visible Dividers are visible

    Closing the side sheet

    Clicking outside the sheet should NOT cancel the current process and close it by default.

    Multi step workflow

    Unlike modals, side sheets can have multi steps workflow. Instead of showing multiple sheets, the entire workflow happens within the scope of a single side sheet. A user can navigate through the back stack using the Back button at the top left.