Styles

Typography

Text Styles

u-text-style-display
Class
u-text-style-h1

Class

u-text-style-h2

Class

u-text-style-h3

Class

u-text-style-h4

Class

u-text-style-h5
Class
u-text-style-h6
Class
u-text-style-para-hg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
u-text-style-para-lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
u-text-style-para-main
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
u-text-style-para-md
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
u-text-style-para-sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
u-eyebrow-text
Lorem Ipsum
u-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote
<div>example code block here</div>

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Weights

u-weight-light
Lorem ipsum dolor
u-weight-regular
Lorem ipsum dolor
u-weight-medium
Lorem ipsum dolor
u-weigh-semibold
Lorem ipsum dolor
u-weigh-bold
Lorem ipsum dolor

Line Height

u-line-height-main
Lorem ipsum dolor
u-line-height-small
Lorem ipsum dolor
u-line-height-medium
Lorem ipsum dolor
u-line-height-large
Lorem ipsum dolor
u-line-height-huge
Lorem ipsum dolor

Letter Spacing

u-letter-spacing-main
Lorem ipsum dolor
u-letter-spacing-small
Lorem ipsum dolor
u-letter-spacing-medium
Lorem ipsum dolor
u-letter-spacing-large
Lorem ipsum dolor
u-letter-spacing-huge
Lorem ipsum dolor

Text Wrap

u-text-wrap-default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-wrap-balance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-wrap-pretty
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Text Transform

u-text-transform-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-wrap-default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-transform-capatalize
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-transform-lowercase
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Line Clamp

u-text-clamp-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-clamp-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-clamp-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-text-clamp-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Alignment

u-alignment-inherit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-alignment-start
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-alignment-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
u-alignment-end
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Colors

Text Colors

Orange

Bright Green
u-text-color-inherit

Orange

White
u-text-color-white

Orange

Bright Green
u-text-color-green

Orange

Text Faded
u-color-faded

BG Colors

Bright Green
u-bg-bright-green
Forest Green
u-bg-forest-green
Content Primary
u-bg-content-primary
Content Secondary
u-bg-content-secondary
Content Link
u-bg-content-link
Dark
u-bg-dark
Neutral
u-bg-neutral
Transparent
u-bg-transparent
BG Skeleton
u-bg-skeleton
White
u-bg-white

Themes & Modes

Orange

System Light
u-mode-light

Orange

System Dark
u-mode-dark

Orange

Light Theme
u-theme-light

Orange

Dark Theme
u-theme-dark

Sizes

Gap Utilities

gap-inherit
gap-gutter
gap-none
gap-1
gap-2
gap-3
gap-4
gap-5
gap-6
gap-7
gap-8

Row Gap Utilities

row-gap-inherit
row-gap-gutter
row-gap-none
row-gap-1
row-gap-2
row-gap-3
row-gap-4
row-gap-5
row-gap-6
row-gap-7
row-gap-8

Margin Utilities

Margin Top Utilities

u-margin-top-gutter
margin-top: gutter;
u-margin-top-0
margin-top: 0;
u-margin-top-1
margin-top: gap-space-1;
u-margin-top-2
margin-top: gap-space-2;
u-margin-top-3
margin-top: gap-space-3;
u-margin-top-4
margin-top: gap-space-4;
u-margin-top-5
margin-top: gap-space-5;
u-margin-top-6
margin-top: grid-space-6;
u-margin-top-7
margin-top: grid-space-7;
u-margin-top-8
margin-top: grid-space-8;

Margin Bottom Utilities

u-margin-bottom-gutter
margin-bottom: gutter;
u-margin-bottom-0
margin-bottom: 0;
u-margin-bottom-1
margin-bottom: gap-space-1;
u-margin-bottom-2
margin-bottom: gap-space-2;
u-margin-bottom-3
margin-bottom: gap-space-3;
u-margin-bottom-4
margin-bottom: gap-space-4;
u-margin-bottom-5
margin-bottom: gap-space-5;
u-margin-bottom-6
margin-bottom: grid-space-6;
u-margin-bottom-7
margin-bottom: grid-space-7;
u-margin-bottom-8
margin-bottom: grid-space-8;

Margin other Utilities

u-margin-0
margin: 0;
u-margin-top-auto
margin-top: auto;
u-margin-bottom-auto
margin-bottom: auto;
u-margin-sides-auto
margin: 0 auto; (centers element))

Padding Utilities

Padding Utilities

u-padding-sitemargin
padding: sitemargin;
u-padding-gutter
padding: gutter;
u-padding-0
padding: grid-none;
u-padding-1
padding: gap-space-1;
u-padding-2
padding: gap-space-2;
u-padding-3
padding: gap-space-3;
u-padding-4
padding: gap-space-4;
u-padding-5
padding: gap-space-5;
u-padding-6
padding: grid-space-6;
u-padding-7
padding: grid-space-7;
u-padding-8
padding: grid-space-8;

Padding Block Utilities

u-padding-block-sitemargin
padding: 0 sitemargin;
u-padding-block-gutter
padding: 0 grid-gutter;
u-padding-block-0
padding: 0 grid-none;
u-padding-block-1
padding: 0 grid-space-1;
u-padding-block-2
padding: 0 grid-space-2;
u-padding-block-3
padding: 0 grid-space-3;
u-padding-block-4
padding: 0 grid-space-4;
u-padding-block-5
padding: 0 grid-space-5;
u-padding-block-6
padding: 0 grid-space-6;
u-padding-block-7
padding: 0 grid-space-7;
u-padding-block-8
padding: 0 grid-space-8;

Padding Inline Utilities

u-padding-inline-sitemargin
padding: sitemargin 0;
u-padding-inline-gutter
padding: grid-gutter 0;
u-padding-inline-0
padding: grid-none 0;
u-padding-inline-1
padding: grid-space-1 0;
u-padding-inline-2
padding: grid-space-2 0;
u-padding-inline-3
padding: grid-space-3 0;
u-padding-inline-4
padding: grid-space-4 0;
u-padding-inline-5
padding: grid-space-5 0;
u-padding-inline-6
padding: grid-space-6 0;
u-padding-inline-7
padding: grid-space-7 0;
u-padding-inline-8
padding: grid-space-8 0;

Padding Top Utilities

u-padding-top-sitemargin
padding-top: sitemargin;
u-padding-top-gutter
padding-top: grid-gutter;
u-padding-top-gutter
padding-top: 0;
u-padding-top-1
padding-top: gap-space-1;
u-padding-top-2
padding-top: gap-space-2;
u-padding-top-3
padding-top: gap-space-3;
u-padding-top-4
padding-top: gap-space-4;
u-padding-top-5
padding-top: gap-space-5;
u-padding-top-6
padding-top: grid-space-6;
u-padding-top-7
padding-top: grid-space-7;
u-padding-top-8
padding-top: grid-space-8;

Padding Bottom Utilities

u-padding-bottom-sitemargin
padding-bottom: sitemargin;
u-padding-bottom-gutter
padding-bottom: grid-gutter;
u-padding-bottom-0
padding-bottom: 0;
u-padding-bottom-1
padding-bottom: gap-space-1;
u-padding-bottom-2
padding-bottom: gap-space-2;
u-padding-bottom-3
padding-bottom: gap-space-3;
u-padding-bottom-4
padding-bottom: gap-space-4;
u-padding-bottom-5
padding-bottom: gap-space-5;
u-padding-bottom-6
padding-bottom: grid-space-6;
u-padding-bottom-7
padding-bottom: grid-space-7;
u-padding-bottom-8
padding-bottom: grid-space-8;

Padding Left Utilities

u-padding-left-sitemargin
padding-left: sitemargin;
u-padding-left-gutter
padding-left: grid-gutter;
u-padding-left-0
padding-left: 0;
u-padding-left-1
padding-left: gap-space-1;
u-padding-left-2
padding-left: gap-space-2;
u-padding-left-3
padding-left: gap-space-3;
u-padding-left-4
padding-left: gap-space-4;
u-padding-left-5
padding-left: gap-space-5;
u-padding-left-6
padding-left: grid-space-6;
u-padding-left-7
padding-left: grid-space-7;
u-padding-left-8
padding-left: grid-space-8;

Padding Right Utilities

u-padding-right-sitemargin
padding-left: sitemargin;
u-padding-right-gutter
padding-left: grid-gutter;
u-padding-right-0
padding-left: 0;
u-padding-right-1
padding-left: gap-space-1;
u-padding-right-2
padding-left: gap-space-2;
u-padding-right-3
padding-left: gap-space-3;
u-padding-right-4
padding-left: gap-space-4;
u-padding-right-5
padding-left: gap-space-5;
u-padding-right-6
padding-left: grid-space-6;
u-padding-right-7
padding-left: grid-space-7;
u-padding-right-8
padding-left: grid-space-8;

Border Radius Utilities

u-radius-none
u-radius-inherit
u-radius-xsmall
u-radius-small
u-radius-medium
u-radius-large
u-radius-xlarge
u-radius-huge
u-radius-round

Aspect Ratio Utilities

u-ratio-1x1
u-ratio-4x3
u-ratio-16x9
u-ratio-2x1

Layout

Section

section

Container

container

Grid

col
col
col
col
col
col
col
col
col
col

Grid - Desktop

col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12

Grid - Tablet

col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12

Grid - Mobile Landscape

col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12

Grid - Mobile Portrait

col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12

Align Self Utilities

col
u-align-self-start
col
u-align-self-center
col
u-align-self-end
col
u-align-self-inherit

Align columns

row
row-align-start
col
col
col
row
row-align-center
col
col
col
row
row-align-end
col
col
col

Justify columns

row
Justify Start (By default)
col
col
row
row-justify-center
col
col
row
row-justify-end
col
col
row
row-justify-between
col
col
row
row-justify-around
col
col

Offset columns

col
col-lg-offset-1
col
col-lg-offset-2
col
col-lg-offset-3
col
col-lg-offset-4
col
col-lg-offset-5
col
col-lg-offset-6
col
col-md-offset-0
col
col-md-offset-1
col
col-md-offset-2
col
col-md-offset-3
col
col-md-offset-4
col
col-md-offset-5
col
col-md-offset-6
col
col-sm-offset-0
col
col-sm-offset-1
col
col-sm-offset-2
col
col-sm-offset-3
col
col-sm-offset-4
col
col-sm-offset-5
col
col-sm-offset-6
col
col-xs-offset-0
col
col-xs-offset-1
col
col-xs-offset-2
col
col-xs-offset-3
col
col-xs-offset-4
col
col-xs-offset-5
col
col-xs-offset-6

Reorder columns

col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last

Other column modifiers

Shrink column

col
col-shrink
col

Contained column

col
col-lg-contain-left
col
col
col
col-lg-contain-right

Miscellaneous

Display Utilities

u-display-block
display: block;
u-display-inline-block
display: inline-block;
u-display-flex
display: flex;
u-display-inline
display: flex;
u-display-inline-flex
display: inline-flex;
u-display-none
display: none;
u-display-contents
display: contents;
u-hide-if-empty
display: none;
u-hide-if-empty-cms
display: none;

Overflow Utilities

u-overflow-visible
overflow: visible;
u-overflow-hidden
overflow: hidden;
u-overflow-clip
overflow: clip;
u-overflow-x-auto
overflow-x: auto;
u-overflow-y-auto
overflow-y: auto;
u-overflow-hidden-left
overflow: left-cropped;

Z-index Utilities

u-zindex-negative
z-index: -1;
u-zindex-0
z-index: 0;
u-zindex-unset
z-index: unset;
u-zindex-1
z-index: 1;
u-zindex-2
z-index: 2;
u-zindex-3
z-index: 3;

Overflow Utilities

u-position-static
position: static;
u-position-relative
position: relative;
u-position-relative
position: relative;
u-position-relative;
position: relative;
u-position-relative;
position: relative;

Flex Basis Utilities

u-flex-shrink
u-flex-grow
u-flex-noshrink

Responsive modifiers Utilities

u-md-display-none
display: none; (Tablet down)
u-sm-display-none
display: none; (Mobile (L) down)
u-xs-display-none
display: none; (Mobile only)
u-md-display-block
display: block; (Tablet down)
u-sm-display-block
display: block; (Mobile (L) down)
u-xs-display-block
display: block; (Mobile only)

Other Utilities

u-width-full
width: 100%;
u-width-auto
width: auto;
u-min-width-auto
min-width: auto;
u-max-width-none
max-width: none;
u-max-width-full
max-width: 100%;
u-width-full
width: 100%;
u-height-auto
height: auto;
u-border
height: auto;
u-button-wrapper
u-pointer-on
u-pointer-off
u-object-fit-cover
u-object-fit-contain
u-cover
u-cover-absolute
u-sr-only
This is some text inside of a div block.