Utilities

This pattern library uses some SUIT CSS utilities in addition to the custom utilities as documented below.

List

Unstyled

The .u-listUnstyled class overrides all default list styles.

  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="u-listUnstyled">
  <li>Item 0</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Inline

The .u-listInline class presents items inline with a small space between.

Uses flexbox, so can be combined with size utilities if a more grid-like layout is desired for specific breakpoints.

Note: May cause a horizontal scrollbar to display if its container has little or no horizontal padding/margin.

  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="u-listInline">
  <li>Item 0</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Position

A couple of additional positioning utilities in addition to those provided by SUIT CSS. These pin an item with defined dimensions to the center-left or center-right side of a container.

Available classes:

  • .u-posAbsoluteLeft
  • .u-posAbsoluteRight
<div data-example-box class="u-posRelative" style="height: 6em">
  <svg class="Icon u-posAbsoluteLeft">
    <use xlink:href="/assets/toolkit/icons.svg#dove-circle-icon"/>
  </svg></div>
<div data-example-box class="u-posRelative u-marginTopSm" style="height: 6em">
  <svg class="Icon u-posAbsoluteRight">
    <use xlink:href="/assets/toolkit/icons.svg#dove-circle-icon"/>
  </svg></div>

Responsive Display

Breakpoint-specific variations of display utilities.

Available classes:

  • .u-<B>-hidden
  • .u-<B>-block
  • .u-<B>-inlineBlock
  • .u-<B>-inline

<B> corresponds to breakpoint:

  • Sm
  • Md
  • Lg
  • Xl

I'm hidden up to the "medium" breakpoint, then display block.

I display block up to "medium" breakpoints, then inline-block. I display block up to "medium" breakpoints, then inline-block. 
<p data-example-box class="u-hidden u-md-block">
  I'm hidden up to the "medium" breakpoint, then display block.
</p>
<span data-example-box class="u-block u-md-inlineBlock">
  I display block up to "medium" breakpoints, then inline-block.
</span>
<span data-example-box class="u-block u-md-inlineBlock">
  I display block up to "medium" breakpoints, then inline-block.
</span>

Spacing

Margins

.u-margin* and .u-margin*None utility classes can be used to set an element's margin according to the site's modular scale.

Available classes:

  • .u-margin<D><S> where <D> is optional
  • .u-margin<D>None where <D> is optional

<S> options:

  • Xs
  • Sm
  • Md
  • Lg
  • Auto (only applicable if <D> is set to Sides)

<D> options:

  • Top sets margin-top
  • Right sets margin-right
  • Bottom sets margin-bottom
  • Left sets margin-left
  • Sides sets margin-left and margin-right
  • Ends sets margin-top and margin-bottom

Examples:

u-marginXs

u-marginTopNone u-marginBottomLg

u-marginSidesAuto

<h4>Examples:</h4>

<p data-example-box class="u-marginXs"><code>u-marginXs</code></p>
<p data-example-box class="u-marginTopNone u-marginBottomLg"><code>u-marginTopNone u-marginBottomLg</code></p>
<p data-example-box class="u-size2of3 u-marginSidesAuto"><code>u-marginSidesAuto</code></p>

Padding

.u-padding* and .u-padding*None utility classes can be used to set an element's padding according to the site's modular scale.

Available classes:

  • .u-padding<D><S> where <D> is optional
  • .u-padding<D>None where <D> is optional

<S> options:

  • Xs
  • Sm
  • Md
  • Lg

<D> options:

  • Top sets padding-top
  • Right sets padding-right
  • Bottom sets padding-bottom
  • Left sets padding-left
  • Sides sets padding-left and padding-right
  • Ends sets padding-top and padding-bottom

Examples:

u-paddingXs

u-paddingBottomMd

u-paddingEndsLg

<h4>Examples:</h4>

<p data-example-box class="u-paddingXs"><code>u-paddingXs</code></p>
<p data-example-box class="u-paddingBottomMd"><code>u-paddingBottomMd</code></p>
<p data-example-box class="u-paddingEndsLg"><code>u-paddingEndsLg</code></p>

Stacking

.u-stack* utility classes can be used to control the vertical spacing between child elements according to the site's modular scale. These utility classes should be applied to a parent containing element. All .u-stack* classes will set margin-bottom to 0 and will adjust the margin-top depending on which of the following classes you use:

Available classes:

  • .u-stack sets margin-top to 0
  • .u-stack<S>

<S> options:

  • Xs
  • Sm
  • Md
  • Lg

Short stack example

Some term
Some definition that we'll pretend exists here.
Some term
Some definition that we'll pretend exists here.

Large stack example

Some term
Some definition that we'll pretend exists here.
Some term
Some definition that we'll pretend exists here.
<h4>Short stack example</h4>
<dl class="u-stack">
  <dt>Some term</dt>
  <dd>Some definition that we'll pretend exists here.</dd>
  <dt>Some term</dt>
  <dd>Some definition that we'll pretend exists here.</dd>
</dl>

<h4>Large stack example</h4>
<dl class="u-stackLg">
  <dt>Some term</dt>
  <dd>Some definition that we'll pretend exists here.</dd>
  <dt>Some term</dt>
  <dd>Some definition that we'll pretend exists here.</dd>
</dl>

Text

Color

Selectively apply one-off text colors. Class names correspond to color variables from theme CSS (as opposed to standard web color keywords).

Available classes:

  • .u-textBlack
  • .u-textGray
  • .u-textLinkColor
  • .u-textBrandColor
  • .u-textRed

Magically desaturated link

I am gray.

I am the color of a link.

I am the primary brand color.

I am red.

<p>
  <a class="u-textBlack" href="#">Magically desaturated link</a>
</p>
<p class="u-textGray">I am gray.</p>
<p class="u-textLinkColor">I am the color of a link.</p>
<p class="u-textBrandColor">I am the primary brand color.</p>
<p class="u-textRed">I am red.</p>

Family

Use .u-familySans to selectively apply sans-serif type style in place of default body serif.

I am a sans-serif paragraph.

<p class="u-familySans">I am a sans-serif paragraph.</p>

Sizing

Use the following utility classes to make elements incrementally larger or smaller than their default state according to the site's modular scale.

  • u-textBigger
  • u-textSmaller

Now I'm as big as an H1 but I'm actually an h2

Now I'm as big as an H2 but I'm actually an h3

I haven't changed at all.

Same as it ever was. 
<div class="u-textBigger">
  <h2>Now I'm as big as an H1 but I'm actually an <code>h2</code></h2>
  <h3>Now I'm as big as an H2 but I'm actually an <code>h3</code></h3>
  <p class="u-textSmaller">I haven't changed at all.</p>
</div>

<div class="u-textSmaller">
  <div class="u-textSmaller">
    <div class="u-textBigger">
      <span class="u-textBigger">Same as it ever was.</span>
    </div>
  </div>
</div>

Weight

  • u-weightNormal
  • u-weightBold

Normal

Bold 

<p>
  <b class="u-weightNormal">Normal</b>
</p>

<p class="u-weightBold">
  Bold
</p>