GroupCollect 1.3.252
- 1.1.0

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

A tertiary box 

<.box tertiary>
  <.p>A tertiary box</.p>
</.box>
Secondary with padding Open in playground

A secondary box with its padding overridden 

<.box padding="base" secondary>
  <.p>A secondary box with its padding overridden</.p>
</.box>
Secondary with top padding Open in playground

A secondary box with only its top padding overridden 

<.box class="gc-padding-top-3xs" secondary>
  <.p>A secondary box with only its top padding overridden</.p>
</.box>
Card Open in playground

A card box 

<.box padding="xs" card>
  <.p>A card box</.p>
</.box>