View in StorybookView on NPM

Why?

To group related content into a box or to visually break up a page layout.

Usage

Use panels in side panel as an aside from the main content, or to group related content.

Panels have a default padding and remove the margin top/bottom from the first/last children to maintain consistent padding.

Panels have a margin above and below by default to separate from the surrounding content.

Variants

You can choose from the default panel and four additional variations:

  • Primary
  • Impact
  • Impact (alternative)
  • Inverse

For examples of the variants and for examples of the HTML to use, see Storybook.