Panel

Usage

• Use Panel as the primary surface component for grouping related content into bordered sections on a page.
• Use Panel for content grouping on settings pages, detail views, and dashboards.
• Use Panel to wrap data presentation elements like tables, lists, and charts.
• Use Panel to structure form sections, especially when a page contains multiple form groups.
• Use Card instead of Panel for smaller, self-contained surfaces used as selectable or clickable items within a grid or list. Panels and Cards are not interchangeable.
• Maintain Panels when loading or empty states are necessary — never remove the Panel when there is no data.

Appearance

• Enable section borders (withSectionBorders) on the Panel to visually separate groups within it. Use borders to cleanly divide form sections or distinct content areas.
• Without borders, section padding collapses into a single gap between content areas.
• Use PanelInset for full-bleed content that extends edge-to-edge within the Panel, ignoring default padding. Use it for tables, images, or colored backgrounds. When placed first or last, it inherits the Panel's border radius.
• Disable section padding (withPadding={false} on PanelSection) to let content sit flush against section edges. Use for tables, lists, or elements that handle their own spacing.

Content

• Write titles as short nouns or noun phrases that describe the Panel's content. Never use verbs or action-oriented titles.
• Write descriptions that add context supplementing the title. Never repeat the title in the description.
• Write action labels as direct verbs or verb phrases. Reinforce the label with the Panel title's noun (e.g., "Create service account" for a "Service accounts" Panel).

Implementation Notes

• Panel is a composition-based component. Build Panels by composing subcomponents as children: PanelHeader, PanelSection, PanelFooter, PanelInset, PanelTitle, PanelDescription, and PanelActions.
• PanelTitle renders a Heading (defaults to level="3", color="bold"). PanelDescription renders a Paragraph (defaults to variant="secondary"). PanelActions renders a ButtonGroup with groupVariant="spaced".
• PanelHeader and PanelFooter are specialized PanelSection wrappers with layout styling — they accept the same withBorder and withPadding props.
• Setting withSectionBorders on Panel propagates via context to all child PanelSection, PanelHeader, and PanelFooter components. Override per-section with the withBorder prop on individual sections.
• withTabs applies a negative top margin and removes the top-left border radius to visually attach the Panel to a Tabs component above it.
• Panel defaults to backgroundColor="base".
• All Panel components are polymorphic via as (default div).
• React: pass content as children. Ember: yield content in the default block. Component names in Ember are prefixed with Pluma (e.g., <PlumaPanel>, <PlumaPanelHeader>, <PlumaPanelSection>). Ember args use @ syntax (e.g., @withSectionBorders={{true}}).