Typography
Text Styles
display-large
Display
display
Display
h1
Heading
h1
h2
Heading
h2
h3
Heading
h3
h4
Heading
h4
h5
Heading
h5
h6
Heading
h6
text-xlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
text-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-main
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-xsmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
eyebrow-large
This is an eyebrow
eyebrow
This is an eyebrow
caption
This is an caption
subhead-large
This is a subhead
subhead
This is a subhead
Typographic Elements
All Blockquotes
Block quote when not inside of a rich text element
Block quote when inside of a rich text element
All Ordered List
- Ordered list
- when not inside
- of rich text
- Ordered list
- when inside
- of rich text
All Unordered List
- Unordered list
- when not inside
- of rich text
- Unordered list
- when inside
- of rich text
u-list-style-alpha
- Item 1
- Item 2
- Item 3
u-list-style-roman
- Item 1
- Item 2
- Item 3
Rich Text
u-rich-text
u-bold-accent
u-bold-brand
Bold: Theme Accent
Bold: Brand Color
Bold: Theme Text
u-heading
All child heading elements will inherit all font properties from parent
Font Weight
u-weight-regular
primary-regular
u-weight-medium
primary-medium
u-weight-semibold
primary-semibold
u-weight-bold
primary-bold
Line Height
u-line-height-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-line-height-xsmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-line-height-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-line-height-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-line-height-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Letter Spacing
u-letter-spacing-tight
letter-spacing
u-letter-spacing-normal
letter-spacing
u-letter-spacing-wide
letter-spacing
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
Alignment
u-alignment-inherit
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-start
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-end
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-center-md
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-center-sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-alignment-center-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Align
u-text-left
Text Align
u-text-right
Text Align
u-text-center
Text Align
u-text-center-md
Text Align
u-text-center-sm
Text Align
u-text-center-xs
Text Align
Text Wrap
u-text-balance
Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.
u-text-pretty
Ensures there's more than one word on the last line of text. Ideal for long form content.
u-text-nowrap
Prevents words from wrapping
Trim Text
u-text-trim
Trim top and bottom line height space from text
u-text-trim-top
Trim top line height space from text
u-text-trim-bottom
Trim bottom line height space from text
Text Transform
u-lowercase
Lorem ipsum
u-uppercase
Lorem ipsum
u-capitalize
Lorem ipsum
u-underline
Lorem ipsum
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
Utility Line Divider
Visual Image
Media Overlay
Containers
container
default
container-small
small
container-full
full
Sections
section
p-none
p-xsmall
p-small
p-large
Colors
Text Color
clr-dark
dark-900
clr-light
light-100
clr-text-1
Theme: text
clr-text-2
Theme: text-2
clr-background
Theme: background
clr-accent
Theme: accent
clr-brand
Brand: color
clr-brand-text
Brand: text
clr-green
green
clr-blue
blue
clr-yellow
yellow
clr-navy
navy
clr-fade-50
Fade 50
clr-fade-70
Fade 70
Background Color
u-bg-grid
u-bg-transparent
transparent
u-bg-1
Theme: background
u-bg-2
Theme: background-2
u-bg-brand
Brand: color
Brand Modes
u-brand-blue
Brand: Base
u-brand-green
Brand: Green
u-brand-yellow
Brand: Yellow
u-brand-navy
Brand: Navy
u-brand-dark
Brand: Dark
u-brand-theme
Brand: Theme
Theme Modes
u-theme-dark
Theme: Base
u-theme-light
Theme: Light
u-theme-navy
Theme: Navy
u-theme-blue
Theme: Blue
u-theme-green
Theme: Green
u-theme-yellow
Theme: Yellow
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
u-justify-content-even
Other Flex Utilities
u-flex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink
u-flex-items-even
Grid
Grid Utilities
u-grid-autofit
u-grid-autofill
u-grid-breakout
u-grid-desktop
Vertical Flex on Tablet
u-grid-tablet
Vertical Flex on Mobile
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 End
u-col-end-1
u-col-end-2
u-col-end-3
u-col-end-4
u-col-end-5
u-col-end-6
u-col-end-7
u-col-end-8
u-col-end-9
u-col-end-10
u-col-end-11
u-col-end-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
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
Sizes
Gap
u-gap-border
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
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
u-mb-xsmall
margin-bottom
u-mb-small
margin-bottom
u-mb-main
margin-bottom
u-mb-large
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
u-mt-xsmall
margin-top
u-mt-small
margin-top
u-mt-main
margin-top
u-mt-large
margin-top
Padding
u-padding-margin
u-padding-gutter
u-padding-0
u-padding-1
u-padding-2
u-padding-3
u-padding-4
u-padding-5
u-padding-6
u-padding-7
u-padding-8
u-padding-9
u-padding-xsmall
u-padding-small
u-padding-main
u-padding-large
Padding Block (Top and Bottom)
u-py-margin
u-py-gutter
u-py-0
u-py-1
u-py-2
u-py-3
u-py-4
u-py-5
u-py-6
u-py-7
u-py-8
u-py-9
u-py-xsmall
u-py-small
u-py-main
u-py-large
Padding Inline (Left and Right)
u-px-margin
u-px-gutter
u-px-0
u-px-1
u-px-2
u-px-3
u-px-4
u-px-5
u-px-6
u-px-7
u-px-8
u-px-9
Padding Top
u-pt-margin
u-pt-gutter
u-pt-0
u-pt-1
u-pt-2
u-pt-3
u-pt-4
u-pt-5
u-pt-6
u-pt-7
u-pt-8
u-pt-9
u-pt-xsmall
u-pt-small
u-pt-main
u-pt-large
Padding Bottom
u-pb-margin
u-pb-gutter
u-pb-0
u-pb-1
u-pb-2
u-pb-3
u-pb-4
u-pb-5
u-pb-6
u-pb-7
u-pb-8
u-pb-9
u-pb-xsmall
u-pb-small
u-pb-main
u-pb-large
Padding Left
u-pl-margin
u-pl-gutter
u-pl-0
u-pl-1
u-pl-2
u-pl-3
u-pl-4
u-pl-5
u-pl-6
u-pl-7
u-pl-8
u-pl-9
Padding Right
u-pr-margin
u-pr-gutter
u-pr-0
u-pr-1
u-pr-2
u-pr-3
u-pr-4
u-pr-5
u-pr-6
u-pr-7
u-pr-8
u-pr-9
Responsive Padding
u-padding-0-md
u-padding-0-sm
u-padding-0-xs
MD: Tablet
SM: Landscape
XS: Mobile
u-pt-0-md
u-pt-0-sm
u-pt-0-xs
MD: Tablet
SM: Landscape
XS: Mobile
u-pb-0-md
u-pb-0-sm
u-pb-0-xs
MD: Tablet
SM: Landscape
XS: Mobile
u-px-0-md
u-px-0-sm
u-px-0-xs
MD: Tablet
SM: Landscape
XS: Mobile
u-py-0-md
u-py-0-sm
u-py-0-xs
MD: Tablet
SM: Landscape
XS: Mobile
Border Radius
u-radius-none
u-radius-inherit
u-radius-small
u-radius-main
u-radius-large
u-radius-round
Width
u-width-auto
u-width-full
u-width-fit
u-width-screen
u-min-width-auto
u-max-width-none
Height
u-height-auto
u-height-full
u-height-fit
u-height-screen
Miscellaneous
Display
u-display-inline
Inline
u-display-inline-block
display: inline-block
u-display-block
display: block
u-display-block-md
u-display-block-sm
u-display-block-xs
u-display-contents
display: contents
u-display-contents-md
u-display-contents-sm
u-display-contents-xs
u-display-flex
display: flex
u-display-flex-md
u-display-flex-sm
u-display-flex-xs
Responsive Visibility
u-hide
display: none
u-hide-md
u-hide-sm
u-hide-xs
u-show-md
Medium
u-show-sm
Small
u-show-xs
XSmall
Conditional Visibility
u-hide-if-empty
u-hide-if-empty-cms
Overflow
u-overflow-visible
overflow: visible !important
u-overflow-hidden
overflow: hidden
u-overflow-clip
overflow: clip
u-overflow-clip-left
clip-path
u-overflow-x-auto
overflow-x
u-overflow-y-auto
overflow-y
Z-index
u-zindex-negative
u-zindex-unset
u-zindex-0
u-zindex-1
u-zindex-2
Object-fit
u-fit-cover
u-fit-contain
Hover Effects
fx-underline
Default
fx-scale
Border
u-border
Border
u-border-top
Border Top
u-border-bottom
Border Bottom
u-border-y
Border Top & Bottom
u-border-outline
Border using outline
u-border-none
No Border
u-border-none-md
u-border-none-sm
u-border-none-xs
Border & Padding Trim
u-pb-trim
removes bottom padding from the last child element
u-pt-trim
removes top padding from the first child element
u-px-trim
removes left padding from the first child element and right padding from the last
u-border-trim-first
removes border from the first child element
u-border-trim-last
removes border from the last child element
Other Utilities
u-shadow
Shadow
u-font-inherit
Inherit's all font properties from parent
u-margin-trim
removes the top and bottom margin from child elements that touch the edge of parent's container
u-cover
u-cover-absolute
u-mx-auto
u-my-auto
u-ml-auto
u-mr-auto
margin-inline
margin-block
margin-left
margin-right
u-pointer-off