Boxes are contained areas suitable to group bits of content together. A good example for this is a login or a signup form. In this example, a box is used to create a reset password form.
Use box-head-accent-X for coloring the accent line on top of the box. You can also use box-head-primary, box-head-secondary, or any other theme color.
<div class="box mb-2">
<div class="box-head box-head-accent-1">
<h3>Accent titled head</h3>
</div>
<div class="box-block box-bx box-bb">
<span>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adisci
velit, sed quia non numqu am eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat magni dolores eos qui ratione voluptatem.
</span>
</div>
</div>Boxes are used to create pricing tables as well, with some additional helper classes such as box-price-superscript, box-price-subscript.
Pricing tables adapt to the size of their parent container, so they can be easily sized by placing them within a col-xx-# container.
<div class="row">
<div class="col-lg-4 offset-lg-4">
<div class="box mb-3">
<div class="box-head box-head-accent-2 box-head-pricing">Home</div>
<div class="box-block p-0 box-bx">
<span class="box-price">
<span class="box-price-superscript">$</span>
94
<span class="box-price-subscript">per month</span>
</span>
<ul class="box-list">
<li>A cool feature</li>
<li>Another cool feature</li>
</ul>
</div>
<div class="box-block box-b box-bt-0 text-center p-1">
<a class="btn btn-accent-2 btn-md" href="#">Buy now</a>
</div>
</div>
</div>
</div>