Alignment
Borders
Clearfix
Colors
Columns
Display
Elevation
Flexbox
Line Heights
Order
Over
Ratios
Sizes
Spacing
Sticky
Typographic Utilities
Visibility

Alignment

Alignment utilities allow for quick repositioning of elements.

Text Alignment

Left

<p class="u-text-align--left">Left</p>

Center

<p class="u-text-align--center">Center</p>

Right

<p class="u-text-align--right">Right</p>

Justify

<p class="u-text-align--justify">Justify</p>

In addition, class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change alignment based on viewport width.

This sentence will change aligment based on window size.

<p class="u-text-align--left@small  u-text-align--center@medium  u-text-align--right@large">This sentence will change aligment based on window size.</p>

Floats

u-float--left, u-float--center, and u-float--right classes can be used to float items. Keep in mind there is no such thing as floating something to the center, that class simply sets the left and right margin to auto.

<img class="u-float--left" src="https://placehold.it/40x40" alt="" />

<img class="u-float--right" src="https://placehold.it/40x40" alt="" />

<img class="u-float--center" src="https://placehold.it/40x40" alt="" />

In addition, class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change floats based on viewport width.

Change browser size to see where the image goes.

<p><img class="u-float--left@small  u-float--center@medium  u-float--right@large" src="https://placehold.it/40x40" alt="" />Change browser size to see where the image goes.</p>

Center Image

<img class="u-img--center" src="https://placehold.it/40x40" alt="" />

Content Blocks

Note: The outer element needs some height if you want it to be centered vertically.

Centered

<div class="u-center-block" style="border: 1px solid black; height: 200px;">
    <div class="u-center-block__content">
        Centered
    </div>
</div>

Centered Vertically

<div class="u-center-block" style="border: 1px solid black; height: 200px;">
    <div class="u-center-block__content  u-center-block__content--vertical">
        Centered Vertically
    </div>
</div>

Centered Horizontally

<div class="u-center-block" style="border: 1px solid black; height: 200px;">
    <div class="u-center-block__content  u-center-block__content--horizontal">
        Centered Horizontally
    </div>
</div>

Borders

Add a border to an element on any given side, all sides, or remove borders.

remove all borders

<p class="u-border-none">remove all borders</p>

border all

<p class="u-border-all">border all</p>

border top

<p class="u-border-top">border top</p>

border right

<p class="u-border-right">border right</p>

border bottom

<p class="u-border-bottom">border bottom</p>

border left

<p class="u-border-left">border left</p>

Border Colors

light grey borders

<p class="u-border-all  u-border--grey">light grey borders</p>

brand borders

<p class="u-border-all  u-border--brand">brand borders</p>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change borders based on viewport width.

Borders will be added to this paragraph as the viewport width increases.

<p class="u-border-top  u-border-right@small  u-border-bottom@medium  u-border-left@large">Borders will be added to this paragraph as the viewport width increases.</p>

Clearfix

Easily clear floats by adding .u-clearfix to the parent element.

Clearfix stops the outer element from collapsing even though this paragraph is floated to the left

<div class="u-clearfix" style="border:1px solid black">
    <p class="u-float--left">Clearfix stops the outer element from collapsing even though this paragraph is floated to the left</p>
</div>

Colors

Easily change text color or background color.

Text Color

See settings.global for full list of colors available.

u-color-grey-light
u-color-brand
u-color-black
u-color-beige
u-color-green
u-color-blue-lighter
u-color-blue-light
u-color-blue
u-color-blue-dark
u-color-blue-darker

<ul>
    <li class="u-color-grey-light">u-color-grey-light</li>
    <li class="u-color-brand">u-color-brand</li>
    <li class="u-color-black">u-color-black</li>
    <li class="u-color-beige">u-color-beige</li>
    <li class="u-color-green">u-color-green</li>
    <li class="u-color-blue-lighter">u-color-blue-lighter</li>
    <li class="u-color-blue-light">u-color-blue-light</li>
    <li class="u-color-blue">u-color-blue</li>
    <li class="u-color-blue-dark">u-color-blue-dark</li>
    <li class="u-color-blue-darker">u-color-blue-darker</li>
</ul>

Background Color

See settings.global for full list of colors available.

u-bg-grey-light
u-bg-brand
u-bg-black
u-bg-beige
u-bg-orange
u-bg-purple-lighter
u-bg-purple-light
u-bg-purple
u-bg-purple-dark
u-bg-purple-darker

<ul>
    <li class="u-bg-grey-light  u-color-black">u-bg-grey-light</li>
    <li class="u-bg-brand  u-color-white">u-bg-brand</li>
    <li class="u-bg-black  u-color-white">u-bg-black</li>
    <li class="u-bg-beige  u-color-black">u-bg-beige</li>
    <li class="u-bg-orange  u-color-white">u-bg-orange</li>
    <li class="u-bg-purple-lighter  u-color-white">u-bg-purple-lighter</li>
    <li class="u-bg-purple-light  u-color-white">u-bg-purple-light</li>
    <li class="u-bg-purple  u-color-white">u-bg-purple</li>
    <li class="u-bg-purple-dark  u-color-white">u-bg-purple-dark</li>
    <li class="u-bg-purple-darker  u-color-white">u-bg-purple-darker</li>
</ul>

Fill

Fill classes are only used for SVGs.

<svg class="a-icon  u-fill-brand">
    <use xlink:href="#search-icon"></use>
</svg>

<svg class="a-icon  u-fill-green">
    <use xlink:href="#search-icon"></use>
</svg>

<svg class="a-icon  u-fill-black">
    <use xlink:href="#search-icon"></use>
</svg>

Columns

Columns utilities can easily split text into multiple columns. This is particularly useful for long lists. Classes include u-1col, u-2col, u-3col, and u-4col.

List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item

<ul class="u-2col">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change column counts based on viewport width.

List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item

<ul class="u-1col  u-2col@small  u-3col@medium  u-4col@large">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Display

Display classes are basic overrides for the CSS display property. These should be used sparingly.

Note: These examples don't show much.

u-block

<p class="u-block">u-block</p>

u-inline

<p class="u-inline">u-inline</p>

u-inline-block

<p class="u-inline-block">u-inline-block</p>

u-flex

<p class="u-flex">u-flex</p>

Elevation

Elevation utilities add drop shadows to elements.

<input class="a-field  u-high" />

<input class="a-field  u-higher" />

<input class="a-field  u-highest" />

<input class="a-field  u-low" />

<input class="a-field  u-lower" />

<input class="a-field  u-lowest" />

Flexbox

An assortment of utility classes.

u-flex-auto
u-flex-none
u-flex-column
u-flex-row
u-flex-wrap
u-flex-grow
u-flex-shrink
u-items-start
u-items-end
u-items-center
u-items-baseline
u-items-stretch
u-self-start
u-self-end
u-self-center
u-self-baseline
u-self-stretch
u-justify-start
u-justify-end
u-justify-center
u-justify-between
u-justify-around
u-content-start
u-content-end
u-content-center
u-content-between
u-content-around
u-content-stretch

Line Heights

Override the default line-height value with u-line-height--solid, u-line-height--title, and u-line-height--copy classes.

This sentence has a line-height of 1. This is the smallest value. When text wraps there will be very little space between lines.

<p class="u-line-height--solid">This sentence has a line-height of 1. This is the smallest value. When text wraps there will be very little space between lines.</p>

This sentence has a line-height of 1.25. This is the typically used for large text like headings. When text wraps there will be a bit of space between lines.

<p class="u-line-height--title">This sentence has a line-height of 1.25. This is the typically used for large text like headings. When text wraps there will be a bit of space between lines.</p>

This sentence has a line-height of 1.5. This is the typically used for body copy. When text wraps there will be enough space between lines to read long lines comfortably.

<p class="u-line-height--copy">This sentence has a line-height of 1.5. This is the typically used for body copy. When text wraps there will be enough space between lines to read long lines comfortably.</p>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change line-heights based on viewport width.

Order

Elements can be reordered if their parent is a flex container, such as a grid. There are three ordering options, u-order-first, u-order-last, and u-order-unordered which simply returns the order to the default value of 0.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item  u-order-last">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item  u-order-first">third</div>
</div>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change the order based on viewport width.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item  u-order-last@large  u-order-unorderd@medium u-order-first@small">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item">third</div>
</div>

Over

Over utility classes are an easy way to change an item's z-index. Classes from lowest to highest are u-over-content, u-over-control, u-over-page, u-over-screen, and u-over-everything. The item must have a position set for these classes to work.

<div style="position: relative;">
    <div class="u-over-content  u-bg-red" style="height: 50px; position: absolute; width: 25%;"></div>
    <div class="u-over-control  u-bg-green" style="height: 50px; left: 20%; position: absolute; top: 40px; width: 25%;"></div>
    <div class="u-over-page  u-bg-blue" style="height: 50px; left: 40%; position: absolute; top: 80px; width: 25%;"></div>
    <div class="u-over-screen  u-bg-yellow" style="height: 50px; left: 60%; position: absolute; top: 120px; width: 25%;"></div>
    <div class="u-over-everything  u-bg-purple" style="height: 50px;  position: absolute; right: 0; top: 160px; width: 25%;"></div>
</div>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change z-index at specific breakpoints and above.

Ratios

Ratio classes can be used to create boxes that will retain their aspect ratio even if their width is constrained. These can be used to insert Kaltura videos and playlists with various configurations.

u-ratio--16x9 is the ratio commonly used for single videos.

u-ratio--2x1 is the ratio commonly used for horizontal video playlists.

3x1

<div class="u-ratio  u-ratio--3x1  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>3x1</p>
    </div>
</div>

21x9

<div class="u-ratio  u-ratio--21x9  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>21x9</p>
    </div>
</div>

2x1

<div class="u-ratio  u-ratio--2x1  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>2x1</p>
    </div>
</div>

16x9

<div class="u-ratio  u-ratio--16x9  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>16x9</p>
    </div>
</div>

3x2

<div class="u-ratio  u-ratio--3x2  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>3x2</p>
    </div>
</div>

4x3

<div class="u-ratio  u-ratio--4x3  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>4x3</p>
    </div>
</div>

1x1

<div class="u-ratio  u-ratio--1x1  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>1x1</p>
    </div>
</div>

3x4

<div class="u-ratio  u-ratio--3x4  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>3x4</p>
    </div>
</div>

2x3

<div class="u-ratio  u-ratio--2x3  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>2x3</p>
    </div>
</div>

9x16

<div class="u-ratio  u-ratio--9x16  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>9x16</p>
    </div>
</div>

1x2

<div class="u-ratio  u-ratio--1x2  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>1x2</p>
    </div>
</div>

1x3

<div class="u-ratio  u-ratio--1x3  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>1x3</p>
    </div>
</div>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change ratios based on viewport width.

This box will change aspect ratio depending on the viewport width.

<div class="u-ratio  u-ratio--1x1@xsmall  u-ratio--2x1@small  u-ratio--3x1@large  u-space-bottom--large">
    <div class="u-ratio__content" style="background:rgba(0,0,0,0.1)">
        <p>This box will change aspect ratio depending on the viewport width.</p>
    </div>
</div>

Sizes

Size utilities can quickly and easily change text sizes.

xsmall

<p class="u-xsmall">xsmall</p>

small

<p class="u-small">small</p>

medium

<p class="u-medium">medium</p>

large

<p class="u-large">large</p>

xlarge

<p class="u-xlarge">xlarge</p>

super

<p class="u-super">super</p>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to change text size based on viewport width.

This text will change size depending on the viewport width.

<p class="u-small  u-large@small  u-super@large">This text will change size depending on the viewport width.</p>

Spacing

Spacing around an element can be added or removed with these spacing utility classes.

Remove Spacing

The .u-no-space class can be used to remove margin and padding from an element.

No space around me.

<p class="u-no-space">No space around me.</p>

Add Spacing

Spacing can be added using xsmall, small, medium, large, xlarge, and super modifiers.

This paragraph has space on all sides.

<p class="u-space--large">This paragraph has space on all sides.</p>

Spacing can also be added to one side with the following class names.

This paragraph has space on top.

<p class="u-space-top--xlarge">This paragraph has space on top.</p>

This paragraph has space to the right.

<p class="u-space-right--xlarge">This paragraph has space to the right.</p>

This paragraph has space on the bottom.

<p class="u-space-bottom--xlarge">This paragraph has space on the bottom.</p>

This paragraph has space to the left.

<p class="u-space-left--xlarge">This paragraph has space to the left.</p>

Add Padding

Padding can be added using xsmall, small, medium, large, xlarge, and super modifiers.

This paragraph has padding on all sides.

<p class="u-padding--large">This paragraph has padding on all sides.</p>

Padding can also be added to one side with the following class names.

This paragraph has padding on top.

<p class="u-padding-top--xlarge">This paragraph has padding on top.</p>

This paragraph has padding to the right.

<p class="u-padding-right--xlarge">This paragraph has padding to the right.</p>

This paragraph has padding on the bottom.

<p class="u-padding-bottom--xlarge">This paragraph has padding on the bottom.</p>

This paragraph has padding to the left.

<p class="u-padding-left--xlarge">This paragraph has padding to the left.</p>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to add spacing or padding based on viewport width.

The spacing around this text will change depending on the viewport width.

<p class="u-no-space@small  u-space--large@medium  u-padding-medium@large">The spacing around this text will change depending on the viewport width.</p>

Sticky

The sticky utility class can stick content to the top of the viewport.

Note: the js-sticky class is required for the JavaScript polyfill.

sticky content

<div style="border: 1px solid black; height: 300px;">
    <div class="u-sticky  js-sticky">
        sticky content
    </div>
</div>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to stick content at specific breakpoints and above.

Typographic Utilities

This paragraph has a regular font weight

<p class="u-regular">This paragraph has a regular font weight</p>

This paragraph has a bold font weight

<p class="u-bold">This paragraph has a bold font weight</p>

This paragraph is italic

<p class="u-italic">This paragraph is italic</p>

This paragraph will truncate if it extends beyond its container

<p class="u-ellipse">This paragraph will truncate if it extends beyond its container</p>

This paragraph will break words when creating new lines

<p class="u-break-word">This paragraph will break words when creating new lines</p>

This paragraph will not wrap when it's too long for its container

<p class="u-no-wrap">This paragraph will not wrap when it's too long for its container</p>

This paragraph is uppercase

<p class="u-uppercase">This paragraph is uppercase</p>

Visibility

Visibility utility classes can easily show or hide elements in various ways.

Hidden visually, but available for screenreaders

<p class="u-visuallyhidden">Hidden visually, but available for screenreaders</p>

Hidden visually, but available for screenreaders and can be focused via keyboard

<p class="u-visuallyhidden  u-focusable">Hidden visually, but available for screenreaders and can be focused via keyboard</p>

Hide from browsers and screenreaders

<p class="u-hide">Hide from browsers and screenreaders</p>

Show in browsers and screenreaders

<p class="u-show">Show in browsers and screenreaders</p>

Print Visibility

Hide in browsers, but show when printing

<p class="u-show@print">Hide in browsers, but show when printing</p>

Show in browsers, but hide when printing

<p class="u-hide@print">Show in browsers, but hide when printing</p>

Media Queries

Class suffixes (@xsmall, @small, @medium, @large, @xlarge, @super) can be used to hide or show elements based on viewport width. Change your browser width to see elements appear / disappear.

Hide when browser is at least small width

<p class="u-hide@small">Hide when browser is at least small width</p>

Hide when browser is at least medium width

<p class="u-hide@medium">Hide when browser is at least medium width</p>

Hide when browser is at least large width

<p class="u-hide@large">Hide when browser is at least large width</p>

Show when browser is at least small width

<p class="u-show@small">Show when browser is at least small width</p>

Show when browser is at least medium width

<p class="u-show@medium">Show when browser is at least medium width</p>

Show when browser is at least large width

<p class="u-show@large">Show when browser is at least large width</p>