background

Boxes

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack's modular elements
at the Element Index Page ?

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>
					
Modern Aesthetic

Build a beautifully performant site with Stack's vast collection of modular elements.

Build Now

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>
					

Modern Aesthetic

Build a beautifully performant site with Stack's vast collection of modular elements.

Build Now

Looking for styled box sections?

View Features Sections