Sheets

---

Overview

Sheets, much like the desktop equivalent desktop Side Panel component, are containers for secondary and supplementary content such as filtering, onboarding and action flows.

The sheet component comes in two size (medium and large) with each size able to be resized by the user through the handle at the top of the sheet.

In addition to the different sizes are a number of configurable elements that can provide need context to a given flow. However if designers wish to have more flexibility, they can make use of the slot element and can toggle off all the relevant elements if desired.

Key Features

---

The medium size variant of sheet can be configured to either include a shroud background or not. While this choice is at the discretion of the designer, a general rule we advise when deciding whether to include or not to include a shroud is to assess the complexity of the content within the sheet.

The more complex and attention demanding the content of a sheet is, the more a shroud should be used.

1. An optional element, the resize handle allows users to stretch the medium sheet into a custom size and then if stretch to the large sheet size, transform into a the large variant.
2. While optional, if the user is required to take action on a given flow within the sheet, the button group should be included in the sheet.
3. The close icon, when clicked, closes the sheet.
4. The title, while optional, provides context for the content nested in the sheet.
5. As long as the content conforms to the padding and spacing of the sheet, designers should include this content here.

---

Many of the elements found in the medium variant are applicable to the large variant. Below is guidance that applies to the large sheet variant only.

1. When used, the large sheet completely obscures the content of the associated page.
2. This is an example of all the optional elements toggled off with just the slot showing.

Usage

---