Wrap content in boxes with the .box class.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
<div class="box">Lorem ipsum...</div>
Box Header
You can add a header to the box by creating a .box-header element within the .box.
Box Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
Box Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, veritatis, eum, adipisci temporibus cumque ex asperiores necessitatibus excepturi eaque nihil voluptate nesciunt dignissimos rem perspiciatis tenetur aliquid expedita commodi sapiente!
Box Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, veritatis, eum, adipisci temporibus cumque ex asperiores necessitatibus excepturi eaque nihil voluptate nesciunt dignissimos rem perspiciatis tenetur aliquid expedita commodi sapiente!
Box Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, veritatis, eum, adipisci temporibus cumque ex asperiores necessitatibus excepturi eaque nihil voluptate nesciunt dignissimos rem perspiciatis tenetur aliquid expedita commodi sapiente!
<div class="box">
<div class="box-header"><h4>Box Header</h4></div>
<p>Lorem ipsum...</p>
</div>
Box Sizes
You can decrease the padding and box-shadow effect by using a .small-box class.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
Box Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
<div class="small-box">Lorem ipsum...</div>
Box Colors
You can change up the color by using a .subtle-box or .dark-box class.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum veritatis assumenda suscipit enim quia inventore dolores voluptas fugit repudiandae. Maxime deserunt sed dolor animi beatae amet dolore accusantium aut.
<div class="box subtle-box">Lorem ipsum...</div>
<div class="box dark-box">Lorem ipsum...</div>
Stacked Boxes
You can stack the boxes by using the .stacked-top-box, .stacked-box, and .stacked-bottom-box classes:
Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Consectetur adipisicing elit.
Autem ipsum veritatis assumenda suscipit.
<div class="box stacked-top-box">Lorem ipsum...</div>
<div class="box subtle-box stacked-box">Lorem ipsum...</div>
<div class="box dark-box stacked-box">Lorem ipsum...</div>
<div class="box stacked-bottom-box">Lorem ipsum...</div>
Box Dividers
In addition to stacking boxes, you can use hr.box-divider to divide up boxes, which looks pretty similar.
Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Autem ipsum veritatis assumenda suscipit.
Lorem ipsum dolor sit amet.
Consectetur adipisicing elit.
Autem ipsum veritatis assumenda suscipit.
<div class="box">
<p>Lorem ipsum...</p>
<hr class="box-divider">
<p>Lorem ipsum...</p>
</div>