Box

Basic Box

The box object is a utility layout object that you can use to create a variety of user interface components by combining it with components or utility classes. Using the o-box object creates consistency across user interface components.

<div class="o-box u-bg-gray-light">
  <h3 class="nyp-type-h2 u-m-b-xxs">Be brave. Go out on a limb.</h3>
  <p>That's where the fruit is. We'll paint one happy little tree right here. There is immense joy in just watching - watching all the little creatures in nature.</p>
  <p>And I will hypnotize that just a little bit. Let your imagination be your guide. With something so strong, a little bit can go a long way.</p>
</div>

Modifiers

The box object comes with a few modifiers that allows us to change the padding in the box consistently. The modifiers include the usual suspects: xs, sm, lg, xl and xxl. There is also a flush modifier to remove padding but keeps the last-child pseudo selector to remove margin from the last element in the box.

<div class="o-box o-box--xs u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a extra small box</p>
</div>
<div class="o-box o-box--sm u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a small box</p>
</div>
<div class="o-box o-box--lg u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a large box</p>
</div>
<div class="o-box o-box--xl u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a extra large box</p>
</div>
<div class="o-box o-box--xxl u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a extra extra large box</p>
</div>
<div class="o-box o-box--flush u-bg-blue-light">
  <p class="nyp-type-large u-text-bold">I'm a flush box</p>
  <p>And I don't have a margin. You probably won't use me much, but I'm here if you need me!</p>
</div>

Examples

You can use the o-box object to create many user interface elements. Below are some illustrative examples which show the power of combining objects and utilities to make components without even using a component.

<div class="o-grid">
  <div class="o-grid__item-12 o-grid__item@md o-grid__item-6@lg o-grid__item@xl u-m-b">
    <article class="o-box u-bg-gray-light u-f-column-full">
      <h3 class="nyp-type-h4 u-m-b-xxs">You can do anything your heart can imagine.</h3>
      <p>Work on one thing at a time. Don't get carried away - we have plenty of time. We'll have a super time. This is the way you take out your frustrations.</p>
      <div class="u-m-t-auto">
        <a href="#" class="c-button">More Bob Ross</a>
      </div>
    </article>
  </div>
  <div class="o-grid__item-12 o-grid__item@md o-grid__item-6@lg o-grid__item@xl u-m-b">
    <article class="o-box u-bg-gray-light u-f-column-full">
      <h3 class="nyp-type-h4 u-m-b-xxs">Absolutely no pressure.</h3>
      <p>You are just a whisper floating across a mountain. Anyone can paint. Isn't that fantastic? You can just push a little tree out of your brush like that.</p>
      <div class="u-m-t-auto">
        <a href="#" class="c-button c-button--secondary">More Bob Ross</a>
      </div>
    </article>
  </div>
  <div class="o-grid__item-12">
    <article class="o-box u-p-horz-0">
      <div class="o-grid">
        <div class="o-grid__item-12 o-grid__item@md">
          <h3 class="nyp-type-h4">Let's have a happy little tree in here</h3>
          <p class="u-m-b-0">Those great big fluffy clouds. We're not trying to teach you a thing to copy. We're just here to teach you a technique, then let you loose into the world.</p>
        </div>
        <div class="o-grid__item-auto u-d-flex u-m-t">
          <a href="#" class="c-button c-button--tertiary u-m-t-auto">More Bob Ross</a>
        </div>
      </div>
    </article>
  </div>
</div>

<div class="o-box o-box--xl u-p-horz-0 u-bg-blue u-c-white">
  <div class="o-container">
    <div class="u-w-m800">
      <h3 class="nyp-type-h2">Let's get wild today. Everything is happy if you choose to make it that way.</h3>
      <p class="u-w-m600">You can do it. This present moment is perfect simply due to the fact you're experiencing it. Anytime you learn something your time and energy are not wasted.</p>
    </div>
  </div>
</div>