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>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>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>
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>
Extend it with cosmetic styles in the Components layer or through utility classes.
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>