Intro
The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.
Expandable panel
When to Use
Do
Use the panel:
- To group information.
- To give users the option of hiding this information.
- To show additional information on demand.
Don't
Don’t:
- Nest panels.
- Stack too many panels on one page.
Anatomy
- Header area: By default, the header is clickable and can be used to toggle between the expanded and collapsed state.
a. Icon: Used to expand and collapse the content area. The icon rotates when the panel is expanded (arrow points down) or collapsed (arrow points right).
Note: If the panel is fixed, no icon is shown.
b. Title: Title bar with a header text or custom header.
c. Custom header (optional): Title, buttons or any other HTML elements.
- Content area: The content area can contain any component or set of components.
Anatomy of a panel
Types
Standard Panel
By default, the panel is expandable.
Clicking anywhere on the title bar expands or collapses the content area.
Panel with list
Panel with Custom Header
Use this variant if you want to add actions to the panel header.
If a panel has a custom header, the arrow icon must be used to expand and collapse the panel. Clicking on other parts of the header has no effect on the expand/collapse behavior.
Panel with custom header
Fixed Panel
Fixed panel
Behavior and Interaction
See the variants for the standard panel and panel with custom header.
Responsive Behavior
If the width of the panel is set to 100% (default), the panel and its contents are resized responsively, depending on its parent container.
If the panel has a fixed height, it will take up the designated space even if the panel is collapsed.
Truncation
Panel with truncated title