Panel

Importing

import { 
	Panel, 
	PanelHeader, 
	PanelFooter, 
	PanelTitle,
	PanelDescription,
	PanelActions, 
	PanelSection, 
	PanelInset 
} from '@customerio/pluma-components/react';

A Panel component can be composed with the following child components:

• PanelHeader
  • a container component for a panel's header
• PanelTitle
  • the panel's title, must be nested within a PanelHeader
• PanelDescription
  • an optional description that provides additional context, must be nested within a PanelHeader after the PanelTitle
• PanelFooter
  • a container component for a panel's footer
• PanelActions
  • a container for actions, such as links or buttons. Must be nested within a PanelHeader or PanelFooter
• PanelSection
  • a container component for content in the panel. Internally, PanelHeader and PanelFooter use this component, which sets the correct paddings and is responsible for adding borders between sections.
  • can be used for the main content of the panel, but is optional (not using it won't set paddings automatically)
• PanelInset
  • a special component to stretch its contents to the edges of the panel (over the padding)

Usage

A complete example, using all the available child components, looks like:

Header with Title and Description

The panel header can include both a title and an optional description. These components are arranged in a grid layout with the title and description stacked vertically on the left side and actions on the right side.

Borders

By default, the PanelHeader and PanelFooter components render without a border to separate them from the panel's content.

A border can be enabled by setting withSectionBorders to true on the Panel:

It is also possible to control the borders individually by setting withBorder on a PanelHeader or PanelFooter:

When using a bordered panel, a PanelSection component will automatically add additional padding to separate the content from the borders.

Section Padding

By default, PanelSection components render with padding on all sides. You can disable this padding by setting withPadding={false}, which makes the section function like a PanelInset.

PanelInset

By default, the Panel renders with padding on all sides, and content will render accordingly. The PanelInset component can be used to stretch content to the edges of the panel, ignoring those paddings.

This can be useful in situations like rendering a full-width table, or section dividers within the Panel.

Additionally, if the PanelInset is the first or last child, the top or bottom paddings will also be ignored accordingly.