Font

u-font-primary
Collaboration is at the heart of everything we do
u-font-secondary
Collaboration is at the heart of everything we do

Sizing

text-display-7xl
Lorem ipsum dolor
text-display-6xl
Lorem ipsum dolor
text-display-5xl
Lorem ipsum dolor
text-display-4xl
Lorem ipsum dolor
text-display-3xl
Lorem ipsum dolor
text-display-2xl
Lorem ipsum dolor
text-display-xl
Lorem ipsum dolor
text-lg
Lorem ipsum dolor
text-md
Lorem ipsum dolor
text-base
Lorem ipsum dolor
text-sm
Lorem ipsum dolor

Rich Text

rich-text-inherit

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

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

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.

Code Block

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

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

Other

text-label-md
Lorem ipsum dolor
text-label
Lorem ipsum dolor
text-label-sm
Lorem ipsum dolor
text-button
Lorem ipsum dolor

HTML Tags

H1

Lorem ipsum dolor

H2

Lorem ipsum dolor

H3

Lorem ipsum dolor

H4

Lorem ipsum dolor

H5
Lorem ipsum dolor
H6
Lorem ipsum dolor
Paragraph

At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact.

Label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Link
Text Link
Quote
Block Quote
All Ordered Lists
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
All Unordered Lists
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

Weights

u-text-100
Collaboration is at the heart of everything we do
u-text-200
Collaboration is at the heart of everything we do
u-text-300
Collaboration is at the heart of everything we do
u-text-400
Collaboration is at the heart of everything we do
u-text-500
Collaboration is at the heart of everything we do
u-text-600
Collaboration is at the heart of everything we do
u-text-700
Collaboration is at the heart of everything we do
u-text-800
Collaboration is at the heart of everything we do
u-text-900
Collaboration is at the heart of everything we do

Alignment

u-text-left
Collaboration is at the heart of everything we do
u-text-center
Collaboration is at the heart of everything we do
u-text-right
Collaboration is at the heart of everything we do

Responsive Modifier

u-text-tablet-left
Collaboration is at the heart of everything we do
u-text-landscape-left
Collaboration is at the heart of everything we do
u-text-portrait-left
Collaboration is at the heart of everything we do
u-text-tablet-center
Collaboration is at the heart of everything we do
u-text-landscape-center
Collaboration is at the heart of everything we do
u-text-portrait-center
Collaboration is at the heart of everything we do
u-text-tablet-right
Collaboration is at the heart of everything we do
u-text-landscape-right
Collaboration is at the heart of everything we do
u-text-portrait-right
Collaboration is at the heart of everything we do

Clamping

u-text-clamp-1
Collaboration iAt our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact.s at the heart of everything we do
u-text-clamp-2
At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact.
u-text-clamp-3
At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact.
u-text-clamp-4
At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact.
u-text-clamp-5
At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact At our core, we are a team of designers, developers, and strategists passionate about crafting exceptional digital experiences. Every project is an opportunity to blend creativity, innovation, and purpose to deliver work that makes a real impact

Wrapping

u-text-balance
Collaboration is at the heart of everything we do
u-text-pretty
Collaboration is at the heart of everything we do

Transform

u-text-uppercase
Collaboration is at the heart of everything we do
u-text-capitalize
Collaboration is at the heart of everything we do
u-text-lowercase
Collaboration is at the heart of everything we do

Theme

u-theme-base
u-theme-inverted
u-theme-hr
u-theme-finance

Background

u-bg-primary
u-bg-secondary
u-bg-white
u-bg-transparent

Surface

u-surface-primary
u-surface-secondary
u-surface-dark-blue
u-surface-red
u-surface-light-blue
u-surface-purple
u-surface-orange
u-surface-green

Text

text-color-inherit
This is some text inside of a div block.
text-color-heading
This is some text inside of a div block.
text-color-paragraph
This is some text inside of a div block.
text-color-label
This is some text inside of a div block.
text-color-finance-primary
This is some text inside of a div block.
text-color-brand-primary
This is some text inside of a div block.
text-color-marketing-primary
This is some text inside of a div block.
text-color-sales-primary
This is some text inside of a div block.
text-color-neutral-100
This is some text inside of a div block.

Other

u-horizontal-fade
This is some text inside of a div block.

Margin

Top

u-mt-0
u-mt-auto
u-mt-xxs
u-mt-xs
u-mt-sm
u-mt-md
u-mt-lg
u-mt-xl
u-mt-2xl
u-mt-3xl
u-mt-4xl
u-mt-5xl
u-mt-6xl
u-mt-7xl
u-mt-8xl
u-mt-9xl
u-mt-10xl
u-mt-11xl
u-mt-12xl

Bottom

u-mb-0
u-mb-auto
u-mb-xxs
u-mb-xs
u-mb-sm
u-mb-md
u-mb-lg
u-mb-xl
u-mb-2xl
u-mb-3xl
u-mb-4xl
u-mb-5xl
u-mb-6xl
u-mb-7xl
u-mb-8xl
u-mb-9xl
u-mb-10xl
u-mb-11xl
u-mb-12xl

Left

u-ml-0
u-ml-auto
u-ml-xxs
u-ml-xs
u-ml-sm
u-ml-md
u-ml-lg
u-ml-xl
u-ml-2xl
u-ml-3xl
u-ml-4xl
u-ml-5xl
u-ml-6xl
u-ml-7xl
u-ml-8xl
u-ml-9xl
u-ml-10xl
u-ml-11xl
u-ml-12xl

Right

u-mr-0
u-mr-auto
u-mr-xxs
u-mr-xs
u-mr-sm
u-mr-md
u-mr-lg
u-mr-xl
u-mr-2xl
u-mr-3xl
u-mr-4xl
u-mr-5xl
u-mr-6xl
u-mr-7xl
u-mr-8xl
u-mr-9xl
u-mr-10xl
u-mr-11xl
u-mr-12xl

Other

u-m-0
u-mlr-auto

Padding Content

Top

u-pt-0
u-pt-xxs
u-pt-xs
u-pt-sm
u-pt-md
u-pt-lg
u-pt-xl
u-pt-2xl
u-pt-3xl
u-pt-4xl
u-pt-5xl
u-pt-6xl
u-pt-7xl
u-pt-8xl
u-pt-9xl
u-pt-10xl
u-pt-11xl
u-pt-12xl

Bottom

u-pb-0
u-pb-xxs
u-pb-xs
u-pb-sm
u-pb-md
u-pb-lg
u-pb-xl
u-pb-2xl
u-pb-3xl
u-pb-4xl
u-pb-5xl
u-pb-6xl
u-pb-7xl
u-pb-8xl
u-pb-9xl
u-pb-10xl
u-pb-11xl
u-pb-12xl

Left

u-pl-0
u-pl-xxs
u-pl-xs
u-pl-sm
u-pl-md
u-pl-lg
u-pl-xl
u-pl-2xl
u-pl-3xl
u-pl-4xl
u-pl-5xl
u-pl-6xl
u-pl-7xl
u-pl-8xl
u-pl-9xl
u-pl-10xl
u-pl-11xl
u-pl-12xl

Right

u-pr-0
u-pr-xxs
u-pr-xs
u-pr-sm
u-pr-md
u-pr-lg
u-pr-xl
u-pr-2xl
u-pr-3xl
u-pr-4xl
u-pr-5xl
u-pr-6xl
u-pr-7xl
u-pr-8xl
u-pr-9xl
u-pr-10xl
u-pr-11xl
u-pr-12xl

Horizontal

u-plr-0
u-plr-xxs
u-plr-xs
u-plr-sm
u-plr-md
u-plr-lg
u-plr-xl
u-plr-2xl
u-plr-3xl
u-plr-4xl
u-plr-5xl
u-plr-6xl
u-plr-7xl
u-plr-8xl
u-plr-9xl
u-plr-10xl
u-plr-11xl
u-plr-12xl

Vertical

u-ptb-0
u-ptb-xxs
u-ptb-xs
u-ptb-sm
u-ptb-md
u-ptb-lg
u-ptb-xl
u-ptb-2xl
u-ptb-3xl
u-ptb-4xl
u-ptb-5xl
u-ptb-6xl
u-ptb-7xl
u-ptb-8xl
u-ptb-9xl
u-ptb-10xl
u-ptb-11xl
u-ptb-12xl

Other

u-p-0
u-p-xxs
u-p-xs
u-p-sm
u-p-md
u-p-lg
u-p-xl
u-p-2xl
u-p-3xl
u-p-4xl
u-p-5xl
u-p-6xl
u-p-7xl
u-p-8xl
u-p-9xl
u-p-10xl
u-p-11xl
u-p-12xl

Overflow

u-overflow-hidden
u-overflow-visible

Display

u-d-none
display: none;
u-d-block
u-d-flex
u-d-flex-v
u-d-inline-flex
u-d-contents

Responsive modifiers

u-tablet-d-none
u-landscape-d-none
u-portrait-d-none
u-tablet-d-block
u-landscape-d-block
u-portrait-d-block
u-tablet-d-flex
u-landscape-d-flex
u-portrait-d-flex
u-tablet-d-grid
u-landscape-d-grid
u-portrait-d-grid

Size

u-w-100
u-h-100

Aspect ratio

u-aspect-1x1
u-aspect-16x9
u-aspect-4x3

Icons

u-icon-xxs
u-icon-xs
u-icon-sm
u-icon-md
u-icon-lg
u-icon-xl
u-icon-2xl
u-icon-3xl
u-icon-4xl
u-icon-5xl
u-icon-6xl

Border Radius

u-br-none
u-br-xxs
u-br-xs
u-br-sm
u-br-md
u-br-lg
u-br-xl
u-br-2xl
u-br-3xl
u-br-4xl
u-br-5xl
u-br-6xl
u-br-full

Helpers

u-img-cover
u-link-cover
u-z-index-1
u-pos-relative
u-pos-static
u-flex-stretch-x
u-pointer-events-none

Masks

u-fade-mask-l
u-fade-mask-r
u-fade-mask-lr
u-fade-mask-t
u-fade-mask-b
u-fade-mask-tb

Section

section

Container

container

Grid

col
col
col
col
col
col
col
col
col
col

Desktop

col
col-desktop-1
col
col-desktop-11
col
col-desktop-2
col
col-desktop-10
col
col-desktop-3
col
col-desktop-9
col
col-desktop-4
col
col-desktop-8
col
col-desktop-5
col
col-desktop-7
col
col-desktop-6
col
col-desktop-6
col
col-desktop-12
col
col-desktop-grow
col
col-desktop-shrink

Tablet

col
col-tablet-1
col
col-tablet-11
col
col-tablet-2
col
col-tablet-10
col
col-tablet-3
col
col-tablet-9
col
col-tablet-4
col
col-tablet-8
col
col-tablet-5
col
col-tablet-7
col
col-tablet-6
col
col-tablet-6
col
col-tablet-12
col
col-tablet-grow
col
col-tablet-shrink

Landscape

col
col-landscape-1
col
col-landscape-11
col
col-landscape-2
col
col-landscape-10
col
col-landscape-3
col
col-landscape-9
col
col-landscape-4
col
col-landscape-8
col
col-landscape-5
col
col-landscape-7
col
col-landscape-6
col
col-landscape-6
col
col-landscape-12
col
col-landscape-grow
col
col-landscape-shrink

Portrait

col
col-portrait-1
col
col-portrait-11
col
col-portrait-2
col
col-portrait-10
col
col-portrait-3
col
col-portrait-9
col
col-portrait-4
col
col-portrait-8
col
col-portrait-5
col
col-portrait-7
col
col-portrait-6
col
col-portrait-6
col
col-portrait-12
col
col-portrait-grow
col
col-portrait-shrink

Align Columns

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

Justify Columns

row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col

Reorder columns

col
col-desktop-first
col
col-tablet-first
col
col-landscape-first
col
col-portrait-first
col
col-desktop-last
col
col-tablet-last
col
col-landscape-last
col
col-portrait-last

Gap modifiers

Base

col
col
col
col
col
col

XXS

col
col
col
col
col
col

XS

col
col
col
col
col
col

SM

col
col
col
col
col
col

MD

col
col
col
col
col
col

LG

col
col
col
col
col
col

XL

col
col
col
col
col
col

2XL

col
col
col
col
col
col

3XL

col
col
col
col
col
col

4XL

col
col
col
col
col
col

5XL

col
col
col
col
col
col

6XL

col
col
col
col
col
col

7XL

col
col
col
col
col
col

8XL

col
col
col
col
col
col

9XL

col
col
col
col
col
col

10XL

col
col
col
col
col
col

11XL

col
col
col
col
col
col

12XL

col
col
col
col
col
col

Vertical XXS

col
col
col
col
col
col

Vertical XS

col
col
col
col
col
col

Vertical SM

col
col
col
col
col
col

Vertical MD

col
col
col
col
col
col

Vertical LG

col
col
col
col
col
col

Vertical XL

col
col
col
col
col
col

Vertical 2XL

col
col
col
col
col
col

Vertical 3XL

col
col
col
col
col
col

Vertical 4XL

col
col
col
col
col
col

Vertical 5XL

col
col
col
col
col
col

Vertical 6XL

col
col
col
col
col
col

Vertical 7XL

col
col
col
col
col
col

Vertical 8XL

col
col
col
col
col
col

Vertical 9XL

col
col
col
col
col
col

Vertical 10XL

col
col
col
col
col
col

Vertical 11XL

col
col
col
col
col
col

Vertical 12XL

col
col
col
col
col
col

No gap

col
col
col
col
col
col

Custom

Name

u-class-name