Boxes

These are your basic lego building blocks. When you're starting with a fresh design, use them for filler content and backgrounds.

Always style content separately from layout. Put another way, avoid putting `.box` and `.layout` or `.layout__item` on the same `%div`

As you insert content into boxes, you'll be able to consider graduating them to proper components.

Default

Gray 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.

White

Black

.box.box--gray-1.xs-p1
  %h1.xs-alpha.xs-mb1 Gray 1
  %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
.box.box--white.xs-p1
  %h1.xs-alpha.xs-mb1 White
  %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
.box.box--black.xs-p1
  %h1.xs-alpha.xs-mb1 Black
  %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.

<div class='box box--gray-1 xs-p1'>
  <h1 class='xs-alpha xs-mb1'>Gray 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</div>
<div class='box box--white xs-p1'>
  <h1 class='xs-alpha xs-mb1'>White</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</div>
<div class='box box--black xs-p1'>
  <h1 class='xs-alpha xs-mb1'>Black</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</div>

HIRED

Styleguide

Boxes

Default

Gray 1

White

Black