Box

Box

The o-box object simply makes an element display block and boxes off content by adding padding around it. It also removes the padding of the last child element.

This is a usefull object to use when creating “Cards”.

Extend it with cosmetic styles in the Components layer or through utility classes.

Hello! I am boxed off!

<div class="o-box">
  <p>Hello! I am boxed off!</p>
</div>

Box Padding

Add one of the available size modifiers below to change the padding size of a box.

Class Name Description
o-box--flush Removes padding
o-box--tightest Tightest spacing possible.
o-box--tighter Tighter spacing.
o-box--tight Tight spacing.
o-box--loose Loose spacing.
o-box--looser Looser spacing.
o-box--loosest Loosest spacing.
o-box--huge Huge spacing.

.o-box--tightest

<div class="o-box  o-box--tightest  u-bgGrayLight">
  <p><code>.o-box--tightest</code></p>
</div>

Box Directional Padding

Add one of the available directional modifiers below to change the padding direction of a box.

Class Name Description
o-box--y Vertical padding only.
o-box--x Horizontal padding only.
<div class="o-box  o-box--y">
  <p>Hello world!</p>
</div>

Responsive Prefixes

Target specific breakpoints by using one of more of the available responsive prefixes.

Small Medium Large
o-sm-box--flush o-md-box--flush o-lg-box--flush
o-sm-box--tightest o-md-box--tightest o-lg-box--tightest
o-sm-box--tighter o-md-box--tighter o-lg-box--tighter
o-sm-box--tight o-md-box--tight o-lg-box--tight
o-sm-box--loose o-md-box--loose o-lg-box--loose
o-sm-box--looser o-md-box--looser o-lg-box--looser
o-sm-box--loosest o-md-box--loosest o-lg-box--loosest
<div class="o-box  o-box--tightest  o-sm-box--tight  o-md-box--loose  o-lg-box--loosest">
  <p>Hello world!</p>
</div>

Extending the Box object

Extend it with cosmetic styles in the Components layer or through utility classes.

Look! I have colors!

My appearence has been altered using utility classes!

<div class="o-box  u-bgGrayLightest  u-colorGrayDark  u-borderAll  u-borderGray">
  <h2 class="u-colorBlackish">Look! I have colors!</h2>
  <p>My appearence has been altered using utility classes!</p>
</div>