Skip to content


Panel is a customizable all-purpose content container used to create a visual separation between groups of content.
Figma logo
  • Panels occupy the full width of their parent by default
    • Contain their width by placing them in a container with set dimensions, e.g. Grid
  • Panels extend from Box and can therefore be customized using select Box properties:
    • Spacing (margin only)
    • Layout (for setting dimensions)
    • Color (for changing text color only)
    • Typography (for changing text alignment)

This example demonstrates each Panel variant.

This example demonstrates a filled Panel with a Button.

This example demonstrates an outlined Panel with FAQ embedded in Details.

This example demonstrates how we can create spacing between content blocks using Grid.

This example demonstrates how we can create “quick link” Panels that act as stylized links.

React props
children  ReactNodeThe content of the Panel
component  ElementTypedivAlternate element to render
variant  filledoutlinedfeaturedfilledThe theme of the panel