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>


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

Alert box




Box content

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

<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 class="box__image">
		<img src="/images/background.png" alt="background"/>
	<div class="box__content p-4">
		<p class="mt-2">Box content
	<div class="box__action p-2">
		<button class="btn">Action</button>

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.