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
<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
Disable padding
If you need your content to be flush, you can **disable padding**!
- Chocolates
- Gummies
- Bud
<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
<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
<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.