Panel

Anatomy

Guidelines

When to use

Panels serve as the primary surface component used for grouping related content or actions on the page. Bordered containers organize content neatly into visually distinct sections, making pages easier for users to navigate and understand.

Consider Panels as containers for the following use cases:

• Content grouping: Settings pages, detail views, and dashboards use Panels to organize related information into scannable blocks.
• Data presentation: Tables, lists, and charts are commonly wrapped inside a Panel to establish a clear container with optional headers and actions.
• Forms and configuration: Panels provide structure for form sections, especially when a page contains multiple form groups.

Panel vs Card

Panels and Cards are visually similar components used to group related information together. However, it's important to understand the difference as they are not interchangeable:

• Panels are inline structural containers that organize page content into bordered sections.
• Cards are smaller, self-contained surfaces often used for selectable or clickable items within a grid or list.

Best practices

Using section borders

To elevate the user experience, enable borders to cleanly separate sections for easier understanding. A common use case would be separating form sections.

Loading and empty states

When no data is available or loading indicators must be shown, keep Panels intact for a consistent layout experience.

Configurations

The Panel's internal grid allows the flexibility of its subcomponents to be used in any way while letting it maintain a consistent visual structure.

See the most common Panel configurations below.

Appearance

Borders

Borders visually divide Panel sections for a more organized look and feel. Borders are enabled either on the Panel as a whole or individually by section.

Inset content

Inset extends content edge-to-edge within the Panel by ignoring the default padding. Use it for full-width elements like tables, images, or colored backgrounds that should bleed to the Panel edges. When placed first or last, it inherits the Panel's border radius.

Padding

Section padding is set by default but can be disabled with a component prop. Disabling section padding will allow its content to sit flush against its edges, similar to an inset. This can be used to individually manage a single section's padding.

Content

Action labels

Action labels should be direct about what action will take place when activated. Use the Panel title's noun to reinforce the label.

Descriptions

Descriptions add additional information to support the title. They're best used to explain the Panel's purpose or provide guidance.

Titles

Panel titles should be short nouns or noun phrases that best describe the content. Avoid verbs or action-oriented titles. The title explains what the panel contains, not what the user should do.