Typography

Font Styles

u-text-display

Heading

u-text-h1

Heading

u-text-h2

Heading

u-text-h3

Heading

u-text-h4

Heading

u-text-h5
Heading
u-text-h6
Heading
u-text-large

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

u-text-main

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

u-text-small

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

Font Weight

u-weight-regular

Lorem ipsum dolor

u-weight-medium

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.

Text Align

u-text-align-left

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

u-text-align-center

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

u-text-align-right

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

Restores default styles

Heading, paragraph, and list styles automatically added to all children within this class.

u-hide-rich-text-media

Hides non-text items inside a rich text

Ordered List
  1. Styles cleared
  2. From ordered list
  3. By default
  1. Styles added back
  2. To ordered list
  3. When inside u-rich-text
Unordered List
  • Styles cleared
  • From unordered list
  • By default
  • Styles added back
  • To unordered list
  • When inside u-rich-text
Block Quotes
Styles cleared from block quotes by default
Styles added back to block quotes when inside u-rich-text

Color

Themes

data-theme="invert"

Heading

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

Button Text
Button Text
data-theme="inherit"

Heading

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

Button Text
Button Text
data-theme="light"

Heading

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

Button Text
Button Text
data-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

Flexbox

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Align Self Utilities

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

Align Items Utilities

u-align-items-stretch
u-align-items-top
u-align-items-center
u-align-items-bottom

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Grid

Grid Utilities

u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-autofill
u-grid-subgrid
u-grid-flex

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-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet

Sizes

Gap Utilities

u-gap-none
u-gap-inherit
u-gap-main
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large

Row Gap Utilities

u-gap-row-none
u-gap-row-inherit
u-gap-row-main
u-gap-row-xsmall
u-gap-row-small
u-gap-row-medium
u-gap-row-large

Margin Top Utilities

u-mt-none
u-mt-xsmall
u-mt-small
u-mt-medium
u-mt-large
u-mt-main

Margin Bottom Utilities

u-mb-none
u-mb-xsmall
u-mb-small
u-mb-medium
u-mb-large
u-mb-main

Border Radius Utilities

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

Section Spacing Attributes

data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"

Miscellaneous

Display Utilities

u-display-block
u-display-inline-block
u-display-inline-flex
u-display-inline-grid
u-display-inline
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-scroll
u-overflow-auto
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
u-zindex-under-nav
u-zindex-over-nav

Position Utilities

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

Other Utilities

u-btn-style
u-btn-wrap-left
u-btn-wrap-center
u-btn-wrap-right
u-btn-wrap-between
u-margin-trim
u-margin-inline-auto
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-container
u-container-small
u-container-full
u-sr-only
data-hide-if-empty-cms

Components

Buttons

data-button-style="primary"
Button Text
Play
data-button-style="secondary"
Button Text
Play

Icons

Global & Starter

Eyebrow Text Here

Heading

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.

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

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

Button Text
Button Text

Form

Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.