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.