Panel

Panels slide in or expand from the edge of the screen to reveal additional content or functionality. They are commonly used to provide supplementary information, navigation options, or toolsets without cluttering the main interface.

When to use

Additional Content

Use panels to display additional functionality that complements the main interface without overwhelming it. This may include options for: filtering, settings, editing tasks or supplementary information

Additional Content

Space Efficiency

Use to help save screen real estate by concealing secondary information or modes within a panel

Space Efficiency

Use to help save screen real estate by concealing secondary information or modes within a panel

When to avoid

Critical Hidden Content

Avoid hiding critical content or functionality within panels that can make it difficult for users to discover and access important features

Critical Hidden Content

Avoid hiding critical content or functionality within panels that can make it difficult for users to discover and access important features

Complex Interactions

Panels may not be suitable for complex interactions or multi-step processes. Consider dedicating a whole page or modal dialog for extensive user input and navigation

Complex Interactions

Panels may not be suitable for complex interactions or multi-step processes. Consider dedicating a whole page or modal dialog for extensive user input and navigation

Specifications

Types

Standard

Displays all content without requiring the user to scroll through it. This state is suitable for short summaries, confirmations, or brief configuration forms.

Scrollable

Triggered when the volume of content exceeds the panel's fixed height. The panel enables an internal scrollbar, allowing the user to view all information while the main header and footer CTAs remain pinned and accessible.

Standard

Displays all content without requiring the user to scroll through it. This state is suitable for short summaries, confirmations, or brief configuration forms.

Scrollable

Standard

Displays all content without requiring the user to scroll through it. This state is suitable for short summaries, confirmations, or brief configuration forms.

Scrollable

Standard

Displays all content without requiring the user to scroll through it. This state is suitable for short summaries, confirmations, or brief configuration forms.

Scrollable

Anatomy