Side Panels

The Side Panel can be used as a supplementary control area for the main content on the page. They are generic containers that can exist in a number of different forms. These are guidelines for choosing which type works best for your design.

Types and Positioning

Side panels can appear either inline or as an overlay. Inline side panels can be on either the left or right side of the content. Overlay side panels only slide in from the right of the screen. There is no option for a side panel coming from the left because it could interfere with side navigation on the left.

Most inline side panels will be on the left, but the right is also an option if need be.

Width

Side panels can be any width as long as it corresponds to one of our layout spacing tokens. The default width is 320px, which is layout-300. See the Layout Spacing tokens table below for other options. The largest size that we allow is width is 1024px, which is layout-700.

Collapsing

Inline side panels have an arrow near the top that denotes they are collapsable. The default state of a page should be with the side panel showing. The can been collapsed by the user at any time. Collapsing is optional. Some side panels will not support collapsing.

Overlay side panels do not have an option to collapse. They triggered by a button on a page. They show, and then are hidden once the user clicks to close the panel.