View in StorybookView on NPM


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


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.


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.