Panels are containers used to group and separate content with a strong intent or action, or to simply communicate important information.
Default panel
The default panel style has an emphasised heading element which adds some brand colour to the interface.
Faint panel
The faint panel style is the more subtle and understated option.
Panel with table
Use a table within a panel to give it a more prominent header and surround.
User experience
Panels are designed to group content either for visual structure or as a design requirement. They have optional headers and footers which can be used to associate actions with your grouped content.
Visual design
The default panel uses colour in the header to increase visibility and branding. This can be useful in text heavy screens where areas of colour can provide some relief. As the name suggests the faint panel can be used for content that doesn't need to be visually prominent. Like most of the UI components the faint panel is designed to be subtle and unobtrusive so as not to detract from the content.
Dos and don’ts
- Avoid changing the styles of panels.
- Avoid using long panel headings especially when designing responsive applications.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.