Panel
A container used to display grouped content like text, images, and actions. Can serve as a basis for a card component.
Panel content
API Reference
PanelProps
Extends native HTML attributes inferred from the rendered element `as`.
| Property | Type | Default | Description |
|---|---|---|---|
as | ElementTag | "div" | HTML element to render as. |
ref $bindable | HTMLElement | Reference to the rendered DOM element. The element type is inferred from `as`. | |
color | union | Panel color | |
size | union | "3" | Panel size |
radius | union | Panel radius | |
variant | union | "solid" | Panel variant |
outline | boolean | false | Panel outline |
fullWidth | boolean | false | Panel full width |
fullHeight | boolean | false | Panel full height |
children | Snippet | Panel content to render |
Examples
Card
Card title
Card subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt elit mattis sem mollis,
sit amet dapibus arcu commodo. Morbi non aliquam sapien. Quisque pretium.
Checkbox list
Colors
Panel content
Panel content
Panel content
Panel content
Panel content
Panel content
Fullwidth/Fullheight
Panel content
Interactive
Sizes
Panel size 0
Panel size 1
Panel size 2
Panel size 3
Panel size 4
Panel size 5
Panel size 6
Panel size 7
Panel size 8
Panel size 9
Variants
Panel solid
Panel solid outline
Panel soft
Panel soft outline
Panel clear
Panel clear outline