Box

Source Edit this page

Box is a abstract generic wrapper component.

Basic Box

Box is just container with a border.

I am a box full of mysteries. 
<div class="box">
	<span>I am a box full of mysteries.</span>
</div>

Customize

With help of different utilities like spacing, border etc we can make different components and layout.

Alert box

Title.

Subtitle.

background

Box content 

<div class="box bg-danger--light p-4">
	<span class="fg-danger--ultra">Alert box</span>
</div>

<div class="box d-flex flex-column max-width-20">
	<div class="box__header p-4">
		<h3 class="title-sm">Title.</h3>
		<h4 class="title-xs fg-gray">Subtitle.</43>
	</div>
	<div class="box__image">
		<img src="/images/background.png" alt="background"/>
	</div>
	<div class="box__content p-4">
		<p class="mt-2">Box content
		</p>
	</div>
	<div class="box__action p-2">
		<button class="btn">Action</button>
	</div>
	</div>

Anatomy of a Box

A box is composed of five components.

  1. Box Container - .box
  2. Box Header - .box__header
  3. Box Image - .box__image
  4. Box Content - box__content
  5. Box Action - box__action


Individually all these classes don’t apply an styles except .box__image.
All the classes above provide a structure.