Skip to content

Box

An elevated surface element to wrap your content. This is a purely presentational component with a single default slot, and there's no limit to what you can pass in.

Box vs Module

If our Box is an atom, the Module component is an extension of a Box which you might consider a molecule. Module standardizes common patterns used across the platform to ensure consistency. If the design calls for a Box with a header, actions, content, and/or footer, you can use a Module to provide that structure easily and consistently.

Basic Usage

Render anything you want in a box!

  • Chocolates
  • Gummies
  • Weeeeeeed
More weed man!
template
<Box>
  <p>Render anything you want in a box!</p>
  <ul>
    <li>Chocolates</li>
    <li>Gummies</li>
    <li>Weeeeeeed</li>
  </ul>
  <a href="#">More weed man!</a>
</Box>

Playground

Render anything you want in a box!

  • Chocolates
  • Gummies
  • Weeeeeeed
More weed man!

Disable padding

If you need your content to be flush, you can **disable padding**!

  • Chocolates
  • Gummies
  • Bud
More products
template
<Box disable-padding>
  <p>If you need your content to be flush, you can **disable padding**!</p>
  <ul>
    <li>Chocolates</li>
    <li>Gummies</li>
    <li>Bud</li>
  </ul>
  <a href="#">More products</a>
</Box>

Disable gutters

When you want your content flush on the sides, but still need top & bottom padding!

  • Chocolates
  • Gummies
  • Bud
More products
template
<Box disable-gutters>
  <p>When you want your content flush on the sides, but still need top & bottom padding!</p>
  <ul>
    <li>Chocolates</li>
    <li>Gummies</li>
    <li>Bud</li>
  </ul>
  <a href="#">More products</a>
</Box>

Disable elevation

Flat: Box with no box shadow!

  • Chocolates
  • Gummies
  • Bud
More products
template
<Box disable-elevation>
  <p><strong>Flat</strong>: Box with no box shadow!</p>
  <ul>
    <li>Chocolates</li>
    <li>Gummies</li>
    <li>Bud</li>
  </ul>
  <a href="#">More products</a>
</Box>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.