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 box with padding and no border.

<.box padding="2xs" border="sm">
  <.p>A box with padding and no border.</.p>
</.box>

A box with a thick border and no padding.

<.box padding="none" border="lg">
  <.p>A box with a thick border and no padding.</.p>
</.box>

A bare box

<.box >
  <.p>A bare box</.p>
</.box>

A primary box

<.box primary>
  <.p>A primary box</.p>
</.box>

A secondary box

<.box secondary>
  <.p>A secondary box</.p>
</.box>