Utility Classes

Utility classes are used to apply a single rule to a component. They can be used compositionally to modify elements as needed by a specific design context.

Spacing Classes

Below we describe a suite of utility classes to be used for spacing.

Available Classes

The utility classes available are of the following form:

  • .margin-[direction]-[size] - Margin of size [size] in direction [direction]
  • .padding-[direction]-[size] - Padding of size [size] in direction [direction]

Size can be

  • none - sets value to 0
  • tiny
  • small
  • medium
  • large
  • xlarge

Position can be

  • top
  • bottom
  • left
  • right
  • vert - top and bottom
  • horiz - left and right
  • absent (in which case, rule will apply both horizontally and vertically)

For example:

<button class="margin-none">Marginless Button</button>

Display Classes

Use .block, .inline-block and .inline modify the display types of various elements.

Block Inline-Block Inline 
<!-- Displayed as block -->
<span class="block bg-light-grey padding-medium margin-bottom-medium">Block</span>

<!-- Displayed as inline-block -->
<span class="inline-block bg-light-grey padding-medium margin-right-medium">Inline-Block</span>

<!-- Displayed as inline -->
<span class="inline bg-light-grey margin-right-medium">Inline</span>

If you would like to hide an element altogether, use the .hide class.

You can't see me. 
<span class="hide">You can't see me.</span>

Alignment Classes

These classes are used to align elements.

Vertical Alignment

Use .valign-top, .valign-middle, and .valign-bottom to align elements vertically. Obviously, these may only apply to elements whose display property is set to either inline or inline-block.

Alignment Guideline Align to Top Align to Middle Align to Bottom 
<!-- Alignment Guideline -->
<span class="inline-block valign-middle bg-light-grey padding-medium" style="height: 8rem">Alignment Guideline</span>

<!-- Alignment Examples -->
<span class="inline-block valign-top bg-medium-grey padding-medium">Align to Top</span>
<span class="inline-block valign-middle bg-medium-grey padding-medium">Align to Middle</span>
<span class="inline-block valign-bottom bg-medium-grey padding-medium">Align to Bottom</span>

Always keep in mind that you cannot align an element vertically by itself! It needs another element to which it can align. A group of elements will vertically align to the tallest element in the group.

Text Alignment

Use .text-left, .text-center, and .text-right to align text horizontally.

This text is left-aligned.

This text is center-aligned.

This text is right-aligned.

<p class="text-left">This text is left-aligned.</p>
<p class="text-center">This text is center-aligned.</p>
<p class="text-right">This text is right-aligned.</p>

Reset Classes

These classes are used to reset the styles needed by particular components.

Resetting lists

Use the .reset-list class to reset properties on a <ul> or <ol>.

The Four Seasons

  • Winter
  • Spring
  • Summer
  • Fall

The Four Seasons, reset

  • Winter
  • Spring
  • Summer
  • Fall
<!-- Standard List -->
<h3>The Four Seasons</h3>
<ul>
    <li>Winter</li>
    <li>Spring</li>
    <li>Summer</li>
    <li>Fall</li>
</ul>

<!-- Reset List -->
<h3>The Four Seasons, reset</h3>
<ul class='reset-list'>
    <li>Winter</li>
    <li>Spring</li>
    <li>Summer</li>
    <li>Fall</li>
</ul>

Resetting Buttons

Use the .reset-button class when you wish to reset properties on a <button>. This may be helpful if you need to style a custom button element.

<!-- Standard Button -->
<button>Example Button</button>

<!-- Reset Button -->
<button class="reset-button">Reset Button</button>

Reseting Child-Margins

Use the .reset-child-margins class when you wish to supply margins on children but do not want them applied to the first or last elements.

<div class="row padding-horiz-medium">
    <div class="small-4 padding-medium reset-child-margins" style="background-color: #F1F1F1;">

        <!-- This button has no top margin -->
        <button class="expand">Example Button</button>
        <button class="expand">Example Button</button>
        <button class="expand">Example Button</button>

        <!-- This button has no bottom margin -->
        <button class="expand">Example Button</button>
    </div>
</div>

Font Classes

Tabular Lining

Some themes supply a separate font used to apply tabular lining to numeric characters. This font may be applied to a component using the .text-tabular-lining utility class.

$199.99 - Standard Lining

$199.99 - Tabular Lining

<!-- Standard Text -->
<p>$199.99 - Standard Lining</p>

<!-- Tabular Figures -->
<p class="text-tabular-lining">$199.99 - Tabular Lining</p>

Color Classes

A handful of helpful utility classes to add text and background colors.

Text Colors

Base Text Colors

This is text color primary.

This is text color secondary.

This is text color success.

This is text color alert.

This is text color info.

This is text color warning.

<p class="text-primary">This is text color primary.</p>
<p class="text-secondary">This is text color secondary.</p>
<p class="text-success">This is text color success.</p>
<p class="text-alert">This is text color alert.</p>
<p class="text-info">This is text color info.</p>
<p class="text-warning">This is text color warning.</p>

Mute Text Colors

This is text color primary mute.

This is text color secondary mute.

This is text color success mute.

This is text color alert mute.

This is text color info mute.

This is text color warning mute.

<p class="text-primary-mute">This is text color primary mute.</p>
<p class="text-secondary-mute">This is text color secondary mute.</p>
<p class="text-success-mute">This is text color success mute.</p>
<p class="text-alert-mute">This is text color alert mute.</p>
<p class="text-info-mute">This is text color info mute.</p>
<p class="text-warning-mute">This is text color warning mute.</p>

Neutral Text Colors

This is text color white.

This is text color medium grey.

This is text color dark grey.

This is text color off black.

This is text color black.

<p class="padding-small bg-black text-white">This is text color white.</p>
<p class="text-medium-grey">This is text color medium grey.</p>
<p class="text-dark-grey">This is text color dark grey.</p>
<p class="text-off-black">This is text color off black.</p>
<p class="text-black">This is text color black.</p>

Background Colors

Base Background Colors

This is background color primary.
This is background color secondary.
This is background color success.
This is background color info.
This is background color alert.
This is background color warning.
<div class="padding-small margin-bottom-tiny text-white bg-primary">This is background color primary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-secondary">This is background color secondary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-success">This is background color success.</div>
<div class="padding-small margin-bottom-tiny text-white bg-info">This is background color info.</div>
<div class="padding-small margin-bottom-tiny text-white bg-alert">This is background color alert.</div>
<div class="padding-small margin-bottom-tiny text-white bg-warning">This is background color warning.</div>

Pastel Background Colors

This is background color primary pastel.
This is background color secondary pastel.
This is background color success pastel.
This is background color alert pastel.
This is background color info pastel.
This is background color warning pastel.
<div class="padding-small margin-bottom-tiny text-white bg-primary-pastel">This is background color primary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-secondary-pastel">This is background color secondary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-success-pastel">This is background color success pastel.</div>
<div class="padding-small margin-bottom-tiny bg-alert-pastel">This is background color alert pastel.</div>
<div class="padding-small margin-bottom-tiny bg-info-pastel">This is background color info pastel.</div>
<div class="padding-small margin-bottom-tiny bg-warning-pastel">This is background color warning pastel.</div>

Neutral Background Colors

This is background color white.
This is background color off white.
This is background color light grey.
This is background color medium grey.
This is background color dark grey.
This is background color off black.
This is background color black.
<div class="padding-small margin-bottom-tiny text-black bg-white">This is background color white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-off-white">This is background color off white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-light-grey">This is background color light grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-medium-grey">This is background color medium grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-dark-grey">This is background color dark grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-off-black">This is background color off black.</div>
<div class="padding-small margin-bottom-tiny text-white bg-black">This is background color black.</div>

Text Classes

Text Casing

The .text-lower and .text-upper classes can be used for modifying the text casing.

This text is Lowercase and this text is Uppercase.

<p>This text is <span class="text-lower">Lowercase</span> and this text is <span class="text-upper">Uppercase</span>.</p>

Shared Header / Footer

Flex Classes for NMLV Shared Footer

The NMLV shared footer requires some flex properties to be present on each micro app. The body tag requires .footer-flex-body and the main wrapping element requires .footer-flex-wrapper. This allows the footer to maintain the proper position regardless of the content's height.

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!