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. Panels can be grouped forming a tabcordion, or can be stripped back visually and functionally as a well for a more subtle content experience.

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.