Components
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
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
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
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
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
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
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
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
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
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.
Anatomy
1
Header
Provides a clear title for context and a close icon, and should remain fixed as the user scrolls the content.
2
Divider
Appears on scroll to separate the header and footer from the content.
3
Slot
Allows for designers to swap in custom content supplementary information, forms, or navigation lists.
4
Footer
Fixed to provide a persistent location for primary and secondary action buttons related to the panel's content.
Value
Panel
Panel