Panel
Panel is a customizable all-purpose content container used to create a visual separation between groups of content.
- 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.
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content of the Panel | |
| component | ElementType | div | Alternate element to render |
| variant | filledoutlinedfeatured | filled | The theme of the panel |