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 three different sizes; small, medium and large. All three sizes have the same content but are just different sizes. Side sheets come in three variants; simple, step tracker and tabs. 

Side sheet sizes

Side sheets come in three different sizes; small, medium and large. The amount of content inside of the side sheet depends on which one the design will choose to use. Buttons will fit the width of the container except for the large variant. The large variant buttons will be right aligned and auto width to the call to action title.

Simple

Simple side sheets are raised above the surface and completely cover the context underneath. Side sheet header can provide several controls depending on how the user might need to interact with side sheet content. The slots within the header should be flexible in width and height but always fill the container. For example if there is only a header, the text will fill the entire width of the container but if a button is added then the header title will shorten to accommodate the width of that button to the right. Depending on the content in the header, the surface container may grow. 

1. Surface
2. Header container (optional)
3. Scrim 
4. Primary slot (optional)
5. Secondary slot (optional)
6. Content (just for reference)

Nested Side Sheet

When needing to go another layer deep within a side sheet, another sheet will slide over the first and allow the user to click back to the previous layer via the inactive 40px aside to the left. Nested side sheets can drill down two levels deep if needed. The only defined item in the header  is the backstack and it serves as a way to go back to the previous side sheet.

1. Backstack - Small no emphasis quick action button 
2. Nested Side Sheet - 40px selectable surface
3. Primary slot (optional)
4. Secondary slot (optional)
5. Surface
6. Content (just for reference) 

Footer 

The footer is sticky at the bottom of the side sheet and can house up to 3 buttons and the primary action should always be high emphasis. More actions can be housed in the top right section of the header if needed. The buttons are equally spaced and stretched to fill the width of the container except for the large size variant; those will be aligned to the right and the original size.

1. Container (optional)
2. Buttons (Up to 3 & optional)

Step tracker

A progress step tracker can include all the same elements of a simple side sheet, but also include a stacked progress indicator to aid in multi-step flows contained within the side sheet

1. Stacked progress indicator (see documentation)

Tabs 

Tabs can be added if the side sheet needs multiple pages of content to compare between. The tabs will be flush at the bottom of the header container. 

1. Auto width desktop tabs (see documentation)

Mobile responsive web

The side sheet is responsive and shrinks down to a single page sheet without a scrim once hitting a 550px width. 

Simple side sheet 

1. Header Container (Optional)
2. Primary Slot (Optional)
3. Secondary Slot (Optional)
4. Surface
5. Content (just for reference)

Nested side sheet 

When going another level deep in side sheets, the backstack will be stacked with the content to allow more space on mobile. The backstack will be updated to a medium guidance emphasis quick action button to be similar to a native bottom sheet. 

1. Header Container (Optional)
2. Backstack - Small Medium Quick Action Button (Guidance) 
3. Primary Slot (Optional)
4. Secondary Slot (Optional)
5. Surface
6. Content (just for reference)

Footer

Footer buttons are side by side to fill the width of the container but if the container becomes too small depending on the size of the screen or length of the button CTA, the buttons will stack. 

1. Container (Optional)
2. Buttons (Up to 3 & optional)

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 detailed information
• Tasks for the user to perform 
• Step tracker flows
• Filters

‍

Desktop

Mobile

‍