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>