Typography
Text Styles
display-large
Display Large
Display
display
Display
Display
display-small
Display Small
Display
h1
H1

Heading

h1
h1-m
h2
H2

Heading

h2
h2-m
h3
H3

Heading

h3
h3-m
h4
H4

Heading

h4
h4-m
h5
H5
Heading
h5
h6
H6
Heading
h6
text-large
Text Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-main
Text Main
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-small
Text Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-xsmall
Text XS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
eyebrow
Eyebrow
This is an eyebrow
tag
tag
Tag
Typographic Elements
u-rich-text

Paragraph‍

Text Link

Bold text

All Links in Paragraphs

This is a paragraph with a link

All Blockquotes
Lorem ipsum dolor sit amet, consectetur
All Ordered List
  1. Ordered list
  2. outside of
  3. u-rich-text
  1. List item
  2. List item
All Unordered List
  • Unordered list
  • inside of
  • u-rich-text
  • List item
  • List item
feature_list
  • checklist-item
  • checklist-item
  • checklist-item
Font Weight
u-weight-regular
primary-regular
u-weight-medium
primary-medium
u-weight-bold
primary-bold
Text Transform
u-uppercase
Lorem ipsum
u-capitalize
Lorem ipsum
Text Align
u-text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-text-center-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-text-center-sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-text-center-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-text-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-text-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Wrap
u-font-inherit
Inherits the font size, weight, text-transform, letter-spacing, and wrapping.
tw-balance
Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.
tw-pretty
Ensures there's more than one word on the last line of text. Ideal for long form content.
u-text-nowrap
Text does not wrap
Tablet
Small
xSmall
Line Clamp
u-line-clamp-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-line-clamp-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-line-clamp-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-line-clamp-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor
Components
Elements
Typography Tag
Tag
Typography Heading

Rich Text Heading

Typography Paragraph

This is a paragraph within a rich text block.

Utility Clickable
Utility Background
Buttons
Button Main
btn
is-large
is-small
Small
btn
is-outline
is-tonal
OutlineTonal
Navy
White
Colors
Text Color
clr-fade-70
currentColor with 70% opacity
clr-inherit
inherit
clr-text-1
Theme: text
clr-text-2
Theme: text-2
clr-accent
Theme: accent
clr-brand
Brand: color
clr-brand-text
Brand: text
clr-navy
navy
clr-white
white
clr-cloud
cloud
clr-grey
Grey
clr-dark-blue
dark blue
clr-blue
blue
clr-light-blue
light blue
clr-dark-yellow
dark yellow
clr-yellow
yellow
clr-light-yellow
light yellow
clr-dark-green
dark green
clr-green
green
u-bold-accent

Bold = Theme Accent

u-bold-green

Bold

u-bold-dark-green

Bold

u-bold-light-blue

Bold

u-bold-dark-blue

Bold

u-bold-dark-yellow

Bold

Themes
u-theme-light
Theme: Base
u-theme-dark
Theme: Dark
u-theme-cloud
Theme: Cloud
u-theme-green
Theme: Green
u-theme-blue
Theme: Blue
Backgrounds
u-bg-transparent
transparent
u-bg-1
Theme: background
u-bg-2
Theme: background-2
u-bg-brand
Brand: color
Grid
Grid Utilities
u-grid-2
2-column grid
u-grid-auto
Order Utilities
u-order-first
u-order-last
u-order-auto-md
u-order-auto-sm
u-order-auto-xs
u-order-first-md
u-order-first-sm
u-order-first-xs
u-order-last-md
u-order-last-sm
u-order-last-xs
Column Start
u-col-start-auto
u-col-start-1
u-col-start-2
u-col-start-3
u-col-start-4
u-col-start-5
u-col-start-6
u-col-start-7
u-col-start-8
u-col-start-9
u-col-start-10
u-col-start-11
u-col-start-12
Column Span
u-col-span-full
u-col-span-indent
u-col-span-1
u-col-span-2
u-col-span-3
u-col-span-4
u-col-span-5
u-col-span-6
u-col-span-7
u-col-span-8
u-col-span-9
u-col-span-10
u-col-span-11
u-col-span-12
Row Start
u-row-start-auto
u-row-start-1
u-row-start-2
u-row-start-3
u-row-start-4
u-row-start-5
u-row-start-6
Row Span
u-row-span-1
u-row-span-2
u-row-span-3
u-row-span-4
u-row-span-5
u-row-span-6
Flexbox
Flex Direction
u-flex-row
u-flex-row-wrap
u-flex-column
Align Self Utilities
u-align-self-inherit
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch
Align Items Utilities
u-align-items-inherit
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch
Justify Content Utilities
u-justify-content-inherit
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around
Other Flex Utilities
u-flex-shrink
u-flex-grow
u-flex-noshrink
Other Utilities
Gap
u-gap-inherit
u-gap-flow
u-gap-margin
u-gap-gutter
u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8
u-gap-9
Row Gap
u-row-gap-inherit
u-row-gap-flow
u-row-gap-margin
u-row-gap-gutter
u-row-gap-0
u-row-gap-1
u-row-gap-2
u-row-gap-3
u-row-gap-4
u-row-gap-5
u-row-gap-6
u-row-gap-7
u-row-gap-8
u-row-gap-9
u-row-gap-xsmall
u-row-gap-small
u-row-gap-main
u-row-gap-large
Width & Height
u-width-full
width: 100%
u-width-fit
width: fit-content
u-width-auto
width: auto
u-height-full
height: 100%
u-height-fit
height: fit-content
u-height-screen
min-height: 100svh
u-cover
u-cover-absolute
Padding
u-pt-0
padding-top
u-pb-0
padding-bottom
u-pb-0-m
padding-bottom
u-pb-0-sm
padding-bottom
Margin
u-mx-auto
margin-inline
u-my-auto
margin-block
Margin Bottom
u-mb-auto
margin-bottom
u-mb-gutter
margin-bottom
u-mb-0
margin-bottom
u-mb-1
margin-bottom
u-mb-2
margin-bottom
u-mb-3
margin-bottom
u-mb-4
margin-bottom
u-mb-5
margin-bottom
u-mb-6
margin-bottom
u-mb-7
margin-bottom
u-mb-8
margin-bottom
u-mb-9
margin-bottom
Margin Top
u-mt-auto
margin-top
u-mt-gutter
margin-top
u-mt-0
margin-top
u-mt-1
margin-top
u-mt-2
margin-top
u-mt-3
margin-top
u-mt-4
margin-top
u-mt-5
margin-top
u-mt-6
margin-top
u-mt-7
margin-top
u-mt-8
margin-top
u-mt-9
margin-top
Other Utilities
Display
u-display-block
Block
u-display-inline
Inline
u-display-inline-block
inline-block
u-display-contents
contents
u-display-contents-md
Medium
u-display-contents-sm
Small
u-display-contents-xs
XSmall
Responsive Visibility
u-hide
Lorem ipsum dolor sit amet
u-show-m
show on tablet (medium)
u-show-sm
show on mobile landscape (small)
u-show-xs
show on mobile portrait (extra-small)
u-hide-m
Tablet
u-hide-sm
Small
u-hide-xs
XSmall
Object Fit
u-fit-cover
u-fit-contain
Shadows
u-shadow-1
u-shadow-2
Hover Effects
fx-underline
[fx-underline]
Default
is-reverse
fx-scale
[fx-scale]
Other
u-trim-text
Trim top and bottom
u-trim-text-top
Trim top
u-trim-text-bottom
Trim bottom
u-no-scrollbar
u-sr-only
This can only be read by screen readers
u-pointer-off
u-overflow-clip
Lorem ipsum dolor sit amet
u-overflow-hidden
Lorem ipsum dolor sit amet
Layout
Containers
container
is-full-m
is-full-sm
default
full on tablet
full on mobile
Panels
panel
default
panel.is-full-sm
Border-radius and box-shadows are removed on mobile
Sections
section
p-none
p-small
p-large