Utility Classes

npm version

About

Utility Classes provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.

Install

This component is distributed with npm. After installing npm, you can install the vf-utility-classes with this command.

$ yarn add --dev @visual-framework/vf-utility-classes

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-utility-classes/index.scss";

Make sure you import Sass requirements along with the modules.

File system location: components/vf-utility-classes

Variants

Variant: Misc live utility

Nunjucks demo

{% render '@vf-utility-classes--default', {
  "component-type": "utility"
} %}

Sample output

Et al.

  • .vf-u-text--et-al for use in publications lists and similar

Jon Smith, Jane Johnson,

Screenreader text

  • .vf-u-sr-only some things should only be shown to screen readers

Like this text

No wrap

  • .vf-u-text--nowrap keep text together, as much as possible

I'm some words that can break awkwardly but keep the Company Name together.

Break text

  • .vf-u-text--break break long strings of text

Here's some long text that would otherwise run off the side of the page evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6.

Text-colours

Same colour options as background colours, with a prefix of

.vf-u-text-color--

Text and heading sizes

  • Text: From 1 to 6, with 1 being the largest.
  • Button: From 1 to 2, with 1 being the largest.
  • Heading: From 1 to 5, with 1 being the largest.
.vf-u-type__text-body--1
.vf-u-type__text-body--6

.vf-u-type__text-button--1
.vf-u-type__text-button--2

.vf-u-type__text-heading--1
.vf-u-type__text-heading--5

Grid layout

.vf-u-grid--reset {
  grid-column: 1 / -1;
}

Visibility

.vf-u-display-none {
  display: none;
}

Margins

In t-shirt sizes from 0,xs, sm, md, lg, xl, xl, xxl

.vf-u-margin--0
.vf-u-margin--xs
.vf-u-margin--sm
.vf-u-margin--md
.vf-u-margin--lg
.vf-u-margin--xl
.vf-u-margin--xxl

.vf-u-margin__bottom--0
.vf-u-margin__bottom--..
.vf-u-margin__bottom--xxl

.vf-u-margin__top--0
.vf-u-margin__top--..
.vf-u-margin__top--xxl

.vf-u-margin__left--0
.vf-u-margin__left--..
.vf-u-margin__left--xxl

.vf-u-margin__right--0
.vf-u-margin__right--..
.vf-u-margin__right--xxl

Padding

In t-shirt sizes from 0,xs, sm, md, lg, xl, xl, xxl

.vf-u-padding--0
.vf-u-padding--xs
.vf-u-padding--sm
.vf-u-padding--md
.vf-u-padding--lg
.vf-u-padding--xl
.vf-u-padding--xxl

.vf-u-padding__bottom--0
.vf-u-padding__bottom--..
.vf-u-padding__bottom--xxl

.vf-u-padding__top--0
.vf-u-padding__top--..
.vf-u-padding__top--xxl

.vf-u-padding__left--0
.vf-u-padding__left--..
.vf-u-padding__left--xxl

.vf-u-padding__right--0
.vf-u-padding__right--..
.vf-u-padding__right--xxl

Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of css documentation tool.

Sample output as HTML

<div class="vf-content">

  <h3 id="et-al">Et al.</h3>
  <ul>
    <li><code>.vf-u-text--et-al</code> for use in publications lists and similar</li>
  </ul>
  <p><span class="vf-u-text--et-al">Jon Smith, Jane Johnson, </span></p>
  <h3 id="screenreader-text">Screenreader text</h3>
  <ul>
    <li><code>.vf-u-sr-only</code> some things should only be shown to screen readers</li>
  </ul>
  <p><span class="vf-u-sr-only">Like this text</span></p>
  <h3 id="no-wrap">No wrap</h3>
  <ul>
    <li><code>.vf-u-text--nowrap</code> keep text together, as much as possible</li>
  </ul>
  <p>I&#39;m some words that can break awkwardly but keep the <span class="vf-u-text--nowrap">Company Name</span> together.</p>
  <h3 id="break-text">Break text</h3>
  <ul>
    <li><code>.vf-u-text--break</code> break long strings of text</li>
  </ul>
  <p>Here&#39;s some long text that would otherwise run off the side of the page <span class="vf-u-text--break">evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6</span>.</p>
  <h3 id="text-colours">Text-colours</h3>
  <p>Same colour options as background colours, with a prefix of</p>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-text-color--</span>
</code></pre>
  <h3 id="text-and-heading-sizes">Text and heading sizes</h3>
  <ul>
    <li>Text: From 1 to 6, with 1 being the largest.</li>
    <li>Button: From 1 to 2, with 1 being the largest.</li>
    <li>Heading: From 1 to 5, with 1 being the largest.</li>
  </ul>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-type__text-body--1</span>
<span class="hljs-selector-class">.vf-u-type__text-body--6</span>

<span class="hljs-selector-class">.vf-u-type__text-button--1</span>
<span class="hljs-selector-class">.vf-u-type__text-button--2</span>

<span class="hljs-selector-class">.vf-u-type__text-heading--1</span>
<span class="hljs-selector-class">.vf-u-type__text-heading--5</span>
</code></pre>
  <h3 id="grid-layout">Grid layout</h3>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-grid--reset</span> {
  <span class="hljs-attribute">grid-column</span>: <span class="hljs-number">1</span> / -<span class="hljs-number">1</span>;
}
</code></pre>
  <h3 id="visibility">Visibility</h3>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-display-none</span> {
  <span class="hljs-attribute">display</span>: none;
}
</code></pre>
  <h3 id="margins">Margins</h3>
  <p>In t-shirt sizes from <code>0</code>,<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xl</code>, <code>xxl</code></p>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-margin--0</span>
<span class="hljs-selector-class">.vf-u-margin--xs</span>
<span class="hljs-selector-class">.vf-u-margin--sm</span>
<span class="hljs-selector-class">.vf-u-margin--md</span>
<span class="hljs-selector-class">.vf-u-margin--lg</span>
<span class="hljs-selector-class">.vf-u-margin--xl</span>
<span class="hljs-selector-class">.vf-u-margin--xxl</span>

<span class="hljs-selector-class">.vf-u-margin__bottom--0</span>
<span class="hljs-selector-class">.vf-u-margin__bottom--</span>..
<span class="hljs-selector-class">.vf-u-margin__bottom--xxl</span>

<span class="hljs-selector-class">.vf-u-margin__top--0</span>
<span class="hljs-selector-class">.vf-u-margin__top--</span>..
<span class="hljs-selector-class">.vf-u-margin__top--xxl</span>

<span class="hljs-selector-class">.vf-u-margin__left--0</span>
<span class="hljs-selector-class">.vf-u-margin__left--</span>..
<span class="hljs-selector-class">.vf-u-margin__left--xxl</span>

<span class="hljs-selector-class">.vf-u-margin__right--0</span>
<span class="hljs-selector-class">.vf-u-margin__right--</span>..
<span class="hljs-selector-class">.vf-u-margin__right--xxl</span>

</code></pre>
  <h3 id="padding">Padding</h3>
  <p>In t-shirt sizes from <code>0</code>,<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xl</code>, <code>xxl</code></p>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-padding--0</span>
<span class="hljs-selector-class">.vf-u-padding--xs</span>
<span class="hljs-selector-class">.vf-u-padding--sm</span>
<span class="hljs-selector-class">.vf-u-padding--md</span>
<span class="hljs-selector-class">.vf-u-padding--lg</span>
<span class="hljs-selector-class">.vf-u-padding--xl</span>
<span class="hljs-selector-class">.vf-u-padding--xxl</span>

<span class="hljs-selector-class">.vf-u-padding__bottom--0</span>
<span class="hljs-selector-class">.vf-u-padding__bottom--</span>..
<span class="hljs-selector-class">.vf-u-padding__bottom--xxl</span>

<span class="hljs-selector-class">.vf-u-padding__top--0</span>
<span class="hljs-selector-class">.vf-u-padding__top--</span>..
<span class="hljs-selector-class">.vf-u-padding__top--xxl</span>

<span class="hljs-selector-class">.vf-u-padding__left--0</span>
<span class="hljs-selector-class">.vf-u-padding__left--</span>..
<span class="hljs-selector-class">.vf-u-padding__left--xxl</span>

<span class="hljs-selector-class">.vf-u-padding__right--0</span>
<span class="hljs-selector-class">.vf-u-padding__right--</span>..
<span class="hljs-selector-class">.vf-u-padding__right--xxl</span>

</code></pre>
  <p>Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of
    css documentation tool.</p>

</div>

Assets

Variant: Background live utility

Nunjucks demo

{% render '@vf-utility-classes--background', {
  "component-type": "utility"
} %}

Sample output

Background Colours

.vf-u-background-color--green

.vf-u-background-color--green--darkest

.vf-u-background-color--green--dark

.vf-u-background-color--green--light

.vf-u-background-color--green--lightest

.vf-u-background-color--grey

.vf-u-background-color--grey--darkest

.vf-u-background-color--grey--dark

.vf-u-background-color--grey--light

.vf-u-background-color--grey--lightest

.vf-u-background-color--red

.vf-u-background-color--red--dark

.vf-u-background-color--red--light

.vf-u-background-color--blue

.vf-u-background-color--blue--dark

.vf-u-background-color--blue--light

.vf-u-background-color--purple

.vf-u-background-color--purple--dark

.vf-u-background-color--purple--light

.vf-u-background-color--orange

.vf-u-background-color--orange--dark

.vf-u-background-color--orange--light

.vf-u-background-color--yellow

.vf-u-background-color--yellow--dark

.vf-u-background-color--yellow--light

.vf-u-background-color--bright-green

.vf-u-background-color--bright-green--dark

.vf-u-background-color--bright-green--light

.vf-u-background-color-ui--black

.vf-u-background-color-ui--grey

.vf-u-background-color-ui--grey--light

.vf-u-background-color-ui--yellow

.vf-u-background-color-ui--red

.vf-u-background-color-ui--white

.vf-u-background-color-ui--off-white

Sample output as HTML

<style>
  .vf-utility__examples {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 1em;
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    grid-template-columns: subgrid;
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
  }

  .vf-utility--example span {
    grid-column: 2 / span 1;
    height: 1em;
    width: 100%;
  }
</style>
<div class="vf-content">

  <h3 id="background-colours">Background Colours</h3>
  <section class="vf-utility__examples">
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green</code></p>
      <span class="vf-u-background-color--green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--darkest</code></p>
      <span class="vf-u-background-color--green--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--dark</code></p>
      <span class="vf-u-background-color--green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--light</code></p>
      <span class="vf-u-background-color--green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--lightest</code></p>
      <span class="vf-u-background-color--green--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey</code></p>
      <span class="vf-u-background-color--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--darkest</code></p>
      <span class="vf-u-background-color--grey--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--dark</code></p>
      <span class="vf-u-background-color--grey--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--light</code></p>
      <span class="vf-u-background-color--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--lightest</code></p>
      <span class="vf-u-background-color--grey--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red</code></p>
      <span class="vf-u-background-color--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red--dark</code></p>
      <span class="vf-u-background-color--red--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red--light</code></p>
      <span class="vf-u-background-color--red--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue</code></p>
      <span class="vf-u-background-color--blue"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue--dark</code></p>
      <span class="vf-u-background-color--blue--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue--light</code></p>
      <span class="vf-u-background-color--blue--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple</code></p>
      <span class="vf-u-background-color--purple"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple--dark</code></p>
      <span class="vf-u-background-color--purple--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple--light</code></p>
      <span class="vf-u-background-color--purple--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange</code></p>
      <span class="vf-u-background-color--orange"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange--dark</code></p>
      <span class="vf-u-background-color--orange--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange--light</code></p>
      <span class="vf-u-background-color--orange--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow</code></p>
      <span class="vf-u-background-color--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow--dark</code></p>
      <span class="vf-u-background-color--yellow--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow--light</code></p>
      <span class="vf-u-background-color--yellow--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green</code></p>
      <span class="vf-u-background-color--bright-green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green--dark</code></p>
      <span class="vf-u-background-color--bright-green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green--light</code></p>
      <span class="vf-u-background-color--bright-green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--black</code></p>
      <span class="vf-u-background-color-ui--black"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--grey</code></p>
      <span class="vf-u-background-color-ui--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--grey--light</code></p>
      <span class="vf-u-background-color-ui--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--yellow</code></p>
      <span class="vf-u-background-color-ui--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--red</code></p>
      <span class="vf-u-background-color-ui--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--white</code></p>
      <span class="vf-u-background-color-ui--white"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--off-white</code></p>
      <span class="vf-u-background-color-ui--off-white"></span>
    </article>
  </section>
</div>

Assets

Variant: Border live utility

Nunjucks demo

{% render '@vf-utility-classes--border', {
  "component-type": "utility"
} %}

Sample output

Border colours

.vf-u-border-color--green

.vf-u-border-color--green--darkest

.vf-u-border-color--green--dark

.vf-u-border-color--green--light

.vf-u-border-color--green--lightest

.vf-u-border-color--grey

.vf-u-border-color--grey--darkest

.vf-u-border-color--grey--dark

.vf-u-border-color--grey--light

.vf-u-border-color--grey--lightest

.vf-u-border-color--red

.vf-u-border-color--red--dark

.vf-u-border-color--red--light

.vf-u-border-color--blue

.vf-u-border-color--blue--dark

.vf-u-border-color--blue--light

.vf-u-border-color--purple

.vf-u-border-color--purple--dark

.vf-u-border-color--purple--light

.vf-u-border-color--orange

.vf-u-border-color--orange--dark

.vf-u-border-color--orange--light

.vf-u-border-color--yellow

.vf-u-border-color--yellow--dark

.vf-u-border-color--yellow--light

.vf-u-border-color--bright-green

.vf-u-border-color--bright-green--dark

.vf-u-border-color--bright-green--light

.vf-u-border-color-ui--black

.vf-u-border-color-ui--grey

.vf-u-border-color-ui--grey--light

.vf-u-border-color-ui--yellow

.vf-u-border-color-ui--red

.vf-u-border-color-ui--white

.vf-u-border-color-ui--off-white

Sample output as HTML

<style>
  .vf-utility__examples {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 1em;
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    grid-template-columns: subgrid;
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
  }

  .vf-utility--example span {
    border-style: solid;
    border-width: 1px;
    grid-column: 2 / span 1;
    height: 1em;
    width: 100%;
  }
</style>
<div class="vf-content">

  <h3 id="border-colours">Border colours</h3>
  <section class="vf-utility__examples">
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green</code></p>
      <span class="vf-u-border-color--green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--darkest</code></p>
      <span class="vf-u-border-color--green--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--dark</code></p>
      <span class="vf-u-border-color--green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--light</code></p>
      <span class="vf-u-border-color--green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--lightest</code></p>
      <span class="vf-u-border-color--green--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey</code></p>
      <span class="vf-u-border-color--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--darkest</code></p>
      <span class="vf-u-border-color--grey--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--dark</code></p>
      <span class="vf-u-border-color--grey--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--light</code></p>
      <span class="vf-u-border-color--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--lightest</code></p>
      <span class="vf-u-border-color--grey--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red</code></p>
      <span class="vf-u-border-color--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red--dark</code></p>
      <span class="vf-u-border-color--red--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red--light</code></p>
      <span class="vf-u-border-color--red--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue</code></p>
      <span class="vf-u-border-color--blue"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue--dark</code></p>
      <span class="vf-u-border-color--blue--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue--light</code></p>
      <span class="vf-u-border-color--blue--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple</code></p>
      <span class="vf-u-border-color--purple"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple--dark</code></p>
      <span class="vf-u-border-color--purple--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple--light</code></p>
      <span class="vf-u-border-color--purple--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange</code></p>
      <span class="vf-u-border-color--orange"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange--dark</code></p>
      <span class="vf-u-border-color--orange--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange--light</code></p>
      <span class="vf-u-border-color--orange--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow</code></p>
      <span class="vf-u-border-color--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow--dark</code></p>
      <span class="vf-u-border-color--yellow--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow--light</code></p>
      <span class="vf-u-border-color--yellow--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green</code></p>
      <span class="vf-u-border-color--bright-green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green--dark</code></p>
      <span class="vf-u-border-color--bright-green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green--light</code></p>
      <span class="vf-u-border-color--bright-green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--black</code></p>
      <span class="vf-u-border-color-ui--black"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--grey</code></p>
      <span class="vf-u-border-color-ui--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--grey--light</code></p>
      <span class="vf-u-border-color-ui--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--yellow</code></p>
      <span class="vf-u-border-color-ui--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--red</code></p>
      <span class="vf-u-border-color-ui--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--white</code></p>
      <span class="vf-u-border-color-ui--white"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--off-white</code></p>
      <span class="vf-u-border-color-ui--off-white"></span>
    </article>
  </section>
</div>

Assets

Variant: Float live utility

Nunjucks demo

{% render '@vf-utility-classes--float', {
  "component-type": "utility"
} %}

Sample output

Layout

Floats

Use the utility clasees .vf-u-float__left and .vf-u-float__right to set elements to float. Use .vf-u-clearfix to clear elements if needed on the parent element.

.vf-u-float__left

Lorem ipsum dolor sit

.vf-u-float__right

Lorem ipsum dolor sit

.vf-u-float__none

Lorem ipsum dolor sit

Responsive Floats

At 360px

.vf-u-float__left--xs

Lorem ipsum dolor sit

.vf-u-float__right--xs

Lorem ipsum dolor sit

.vf-u-float__none--xs

Lorem ipsum dolor sit

At 699px

.vf-u-float__left--sm

Lorem ipsum dolor sit

.vf-u-float__right--sm

Lorem ipsum dolor sit

.vf-u-float__none--sm

Lorem ipsum dolor sit

At 800px

.vf-u-float__left--md

Lorem ipsum dolor sit

.vf-u-float__right--md

Lorem ipsum dolor sit

.vf-u-float__none--md

Lorem ipsum dolor sit

At 1024px

.vf-u-float__left--lg

Lorem ipsum dolor sit

.vf-u-float__right--lg

Lorem ipsum dolor sit

.vf-u-float__none--lg

Lorem ipsum dolor sit

At 1200px

.vf-u-float__left--xl

Lorem ipsum dolor sit

.vf-u-float__right--xl

Lorem ipsum dolor sit

.vf-u-float__none--xl

Lorem ipsum dolor sit

Sample output as HTML

<style>
  .vf-utility__examples {
    /* display: grid; */
    /* grid-template-columns: max-content 1fr; */
    /* grid-column-gap: 1em; */
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    margin-bottom: 1em;
    /* grid-template-columns: subgrid; */
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
    margin-bottom: 0 !important;
  }

  .vf-utility--example div {
    align-self: center;
    grid-column: 2 / span 1;
    height: 1em;
  }
</style>
<div class="vf-content">

  <h3 id="layout">Layout</h3>
  <section class="vf-utility__examples | vf-content">
    <h4>Floats</h4>
    <p>Use the utility clasees <code>.vf-u-float__left</code> and <code>.vf-u-float__right</code> to set elements to float. Use <code>.vf-u-clearfix</code> to clear elements if needed on the parent element.</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <h4>Responsive Floats</h4>
    <p>At 360px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 699px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 800px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 1024px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 1200px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>

  </section>

</div>

Assets

Variant: Grid live utility

Nunjucks demo

{% render '@vf-utility-classes--grid', {
  "component-type": "utility"
} %}

Sample output

.vf-u-grid__col--span-1--xs
.vf-u-grid__col--span-2--xs
.vf-u-grid__col--span-3--xs

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

Sample output as HTML

<style>
  .vf-u-grid-example {
    grid-row-gap: 16px;
    margin-bottom: 32px;
  }

  .vf-u-grid-example>div {
    background-color: var(--vf-color--green);
    padding: 16px;
  }
</style>

<div class="vf-u-grid-example | vf-grid vf-grid__col-6">
  <div class="vf-u-grid__col--span-1--xs">.vf-u-grid__col--span-1--xs</div>
  <div class="vf-u-grid__col--span-2--xs">.vf-u-grid__col--span-2--xs</div>
  <div class="vf-u-grid__col--span-3--xs">.vf-u-grid__col--span-3--xs</div>
</div>


<div class="vf-content | vf-u-grid-example | vf-grid vf-grid__col-6">
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
</div>

Assets

Variant: Width live utility

Nunjucks demo

{% render '@vf-utility-classes--width', {
  "component-type": "utility"
} %}

Sample output

Width

Use the utility clasees .vf-u-width__20 to set responive width in 5 percentage increments.

.vf-u-width__5

.vf-u-width__10

.vf-u-width__15

.vf-u-width__20

.vf-u-width__30

.vf-u-width__40

And so on up to 100.

Responsive

You can also make these conditional on screen size with --xs, --sm, --md, --lg or --xl.

.vf-u-width__20--sm

.vf-u-width__20--xl

Sample output as HTML

<style>
  .vf-utility--example div[class^='vf-u-width'] {
    background: green;
    height: 40px;
  }
</style>
<div class="vf-content">

  <h3 id="width">Width</h3>
  <section class="vf-utility__examples | vf-content">
    <h4></h4>
    <p>Use the utility clasees <code>.vf-u-width__20</code> to set responive width in 5 percentage increments.</p>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__5</code></p>
      <div class="vf-u-width__5"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__10</code></p>
      <div class="vf-u-width__10"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__15</code></p>
      <div class="vf-u-width__15"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20</code></p>
      <div class="vf-u-width__20"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__30</code></p>
      <div class="vf-u-width__30"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__40</code></p>
      <div class="vf-u-width__40"></div>
    </article>

    And so on up to 100.
  </section>

  <section class="vf-utility__examples | vf-content">
    <h4>Responsive</h4>

    <p>You can also make these conditional on screen size with <code>--xs</code>, <code>--sm</code>, <code>--md</code>, <code>--lg</code> or <code>--xl</code>.</p>


    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20--sm</code></p>
      <div class="vf-u-width__20--sm"></div>
    </article>


    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20--xl</code></p>
      <div class="vf-u-width__20--xl"></div>
    </article>




  </section>

</div>

Assets

All components in this design system

This page is part of the components section.