GroupCollect 1.3.142

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>
Normal Open in playground

A box with padding and no border. 

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

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>
No decoration Open in playground

A bare box 

<.box >
  <.p>A bare box</.p>
</.box>
Primary Open in playground

A primary box 

<.box primary>
  <.p>A primary box</.p>
</.box>
Secondary Open in playground

A secondary box 

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