Utility Classes

Text

Multi-line text with
appropriate line-height.

Muted

Light

Strong

Italic

XX-Small

X-Small

Small

Medium

Large

X-Large

Left

Center

Right

Putting text inside a container with class name u-rich-text will layout it properly for longer blocks of HTML content (can include tags like strong, h1 and h2).

<div class="o-stack o-stack--vertical o-stack--16">
  <p class="u-paragraph">
    Multi-line text with
    <br />
    appropriate line-height.
  </p>
  <p class="u-muted">Muted</p>
  <p class="u-light">Light</p>
  <p class="u-strong">Strong</p>
  <p class="u-italic">Italic</p>
  <p class="u-text-xxs">XX-Small</p>
  <p class="u-text-xs">X-Small</p>
  <p class="u-text-sm">Small</p>
  <p class="u-text-md">Medium</p>
  <p class="u-text-lg u-line-lg">Large</p>
  <p class="u-text-xl u-line-lg">X-Large</p>
  <p class="u-left">Left</p>
  <p class="u-center">Center</p>
  <p class="u-right">Right</p>
  <div class="u-rich-text">
    <p>
      Putting text inside a container with class name
      <strong>u-rich-text</strong>
      will layout it properly for longer blocks of HTML
      content (can include tags like
      <strong>strong</strong>
      ,
      <strong>h1</strong>
      and
      <strong>h2</strong>
      ).
    </p>
  </div>
</div>

Spacing

You can add padding or margin to any element with the following classes (where * is a multiple of 4):

u-mx-*
u-my-*
u-ml-*
u-mr-*
u-mb-*
u-mt-*

You can also add padding to any element with the following classes:

u-px-*
u-py-*
u-pl-*
u-pr-*
u-pb-*
u-pt-*