Box

Renders a box with optional padding and/or borders.

Read more Read less

A box has even padding and borders on each side. If you need padding and borders on only one or some sides then you don’t have a box.

<.box padding="2xs" border="sm">
  I'm the content!
</.box>

A bare box

Attribute Type Documentation Default Value
class :any

Additional classes to add to the parent.

[]
primary :boolean

Applies the primary border color, radius and padding

false
secondary :boolean

Applies the secondary border color, radius and padding

false
tertiary :boolean

Applies the tertiary border color, background color, radius and padding

false
card :boolean

Applies the card surface: body border color, radius and the primary light

Read more Read less
false

background. Unlike the other variants, padding comes from the padding attribute so cards control their own insets.

padding :string "none"
border :string

The border width

rest :global
tag :string "div"
Required inner_block * :slot
<.p>A bare box</.p>