Boxes

Boxed Content

Wrap any content inside .boxed and .boxed--border to give the content some extra padding.

<div class="boxed boxed--border">
            	<h5>Modern Aesthetic</h5>
            	<p>
            		Build a beautifully performant site with Stack's vast collection of modular elements.
            	</p>
            	<a class="btn btn--primary" href="#">
            		<span class="btn__text">
            			Build Now
            		</span>
            	</a>
            </div>
            					

Boxed Content Modifiers

Boxes can be modified in a number of ways:

• .boxed--lg - increase the padding inside the box
• .bg--primary,dark,secondary - use Stack's background classes to adjust box background colour
• .box-shadow - add a box shadow to the boxed content

<div class="boxed boxed--border  bg--secondary boxed--lg box-shadow">
            	<h5>Modern Aesthetic</h5>
            	<p>
            		Build a beautifully performant site with Stack's vast collection of modular elements.
            	</p>
            	<a class="btn btn--primary" href="#">
            		<span class="btn__text">
            			Build Now
            		</span>
            	</a>
            </div>