Panel

A panel is an optionaly bordered box with some padding around its content and a margin on the bottom. The Panel element consists of a PanelHeader (optional) a PanelBody and PanelButtons (optional)

Props

Examples

Simple panel with just a PanelBody

This is some content inside the body.

Panel containing a PanelHeader

This is the panel header, with a Badge...
34
...and here is the body

Panel containing a PanelHeader

This is the panel header (with dark theme)
...and here is the body

Usage

Just use it. Here’s some code!

Here be the header
Here be the content

Variants

  • Use the size-property to control the fontsize of the contents of the Panel between three preset sizes.
  • Use the theme property to change beteen the light and dark theme.