Typography

Text Styles

u-text-style-h1

Heading

u-text-style-h2

Heading

u-text-style-h3

Heading

u-text-style-h4

Heading

u-text-style-h5
Heading
u-text-style-h6
Heading
u-text-style-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-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-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Weights

u-weight-light

Lorem ipsum dolor

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-semibold

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alignment Modes

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

u-text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

u-text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

u-text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.

Typography Elements

u-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure
Ordered List
  1. Ordered list
  2. when not inside
  3. of rich text
  1. Ordered list
  2. when inside
  3. of rich text
Unordered List
  • Unordered list
  • when not inside
  • of rich text
  • Unordered list
  • when inside
  • of rich text
Block Quotes
Block quote when not inside of a rich text element
Block quote when inside of a rich text element

Color

Themes

u-theme-inherit

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
Button Text
u-theme-light

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
Button Text
u-theme-dark

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
Button Text

Text Color

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Background Color

u-background-transparent
u-background-1
u-background-2
u-background-media

Flexbox

Flex Direction Utilities

u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap

Align Self Utilities

u-align-self-variable
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Align Items Utilities

u-align-items-variable
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Justify Content Utilities

u-justify-content-variable
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around

Flex Basis Utilities

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

Grid

Grid Utilities

u-grid-autofit
u-grid-autofill
u-grid-above
u-grid-below
u-grid-custom
u-grid-breakout
u-grid-subgrid

Column Utilities

u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12

Order Utilities

u-order-first
u-order-last
u-order-unset-above
u-order-unset-below

Sizes

Gap Utilities

u-gap-inherit
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

Sizes

space
section-space

Row Gap Utilities

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

Margin Top Utilities

u-mt-auto
u-mt-gutter
u-mt-text
u-mt-0
u-mt-4
u-mt-8
u-mt-12
u-mt-16
u-mt-24
u-mt-32
u-mt-40
u-mt-48
u-mt-64

Margin Bottom Utilities

u-mb-auto
u-mb-gutter
u-mb-text
u-mb-0
u-mb-4
u-mb-8
u-mb-12
u-mb-16
u-mb-24
u-mb-32
u-mb-40
u-mb-48
u-mb-64

Border Radius Utilities

u-radius-none
u-radius-inherit
u-radius-small
u-radius-main
u-radius-round

Aspect Ratio Utilities

u-ratio-2-1
u-ratio-16-9
u-ratio-3-2
u-ratio-1-1
u-ratio-2-3

Miscellaneous

Display Utilities

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

Overflow Utilities

u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-x-auto
u-overflow-y-auto
u-overflow-hidden-left

Z-Index Utilities

u-zindex-negative
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3

Position Utilities

u-position-static
u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Max Width Utilities

u-max-width-none
u-max-width-10ch
u-max-width-12ch
u-max-width-14ch
u-max-width-16ch
u-max-width-18ch
u-max-width-20ch
u-max-width-30ch
u-max-width-40ch
u-max-width-50ch
u-max-width-60ch
u-max-width-70ch
u-max-width-80ch
u-max-width-100ch
u-max-width-full

Other Utilities

u-all-unset-above
u-all-unset-below
u-text-trim-off
u-btn-group
u-child-contain
u-margin-inline-auto
u-margin-trim
u-pointer-on
u-pointer-off
u-min-height-screen
u-max-width-none
u-width-full
u-height-full
u-cover
u-cover-absolute
u-visual-wrap
u-section
u-container
u-container-small
u-container-full
u-sr-only

Components

Buttons

Dark
Primary
Secondary
Brand
Outlined
Outlined Secondary
Outlined Brand
Isolated
Light
Primary
Secondary
Brand
Outlined
Outlined Secondary
Outlined Brand
Isolated

Icons

Dark
Primary
Primary
Primary
Primary
Primary
Primary
Primary
Dark
Primary
Primary
Primary
Primary
Primary
Primary
Primary

Form

Select all that apply
Choose your favorite color
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select all that apply
Choose your favorite color
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.