components

Panel

A container used to display grouped content like text, images, and actions. Can serve as a basis for a card component.

Show code

Panel content

API Reference

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.
`color`	`union`
`radius`	`union`
`variant`	`union`	"solid"
`outline`	`boolean`	false
`fullWidth`	`boolean`	false
`fullHeight`	`boolean`	false
`p`	`union`	"3"	Padding on all sides.
`px`	`union`		Padding on the left and right sides.
`py`	`union`		Padding on the top and bottom sides.
`pt`	`union`		Padding on the top side.
`pr`	`union`		Padding on the right side.
`pb`	`union`		Padding on the bottom side.
`pl`	`union`		Padding on the left side.
`children`	`Snippet`

Show code

Panel content

Show code

Panel content

Show code

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

Show code

Panel solid

Panel solid outline

Panel soft

Panel soft outline

Panel clear

Panel clear outline