Typography
Text Styles
display
Display
Display
h1
H1
Heading
h1
h2
H2
Heading
h2
h3
H3
Heading
h3
h4
H4
Heading
h4
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-medium
Text Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-medium
Text Medium
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 XSmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
eyebrow
Eyebrow
This is an eyebrow
quote
Quote
This is a quote
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-heading-accent
Bold color: --_theme---heading-accent
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 (Leading)
u-leading-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-leading-xsmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-leading-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-leading-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
u-leading-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Letter Spacing (Tracking)
u-tracking-tight
letter-spacing
u-tracking-normal
letter-spacing
u-tracking-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 Modes
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-center
Lorem ipsum
u-text-center-md
Lorem ipsum
u-text-center-sm
Lorem ipsum
u-text-center-xs
Lorem ipsum
u-text-left
Lorem ipsum
u-text-right
Lorem ipsum
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
Text Transform
u-uppercase
Lorem ipsum
u-capitalize
Lorem ipsum
u-underline
Lorem ipsum
Components
Elements
Typography Tag
Tag
Typography Heading
Heading
Typography Paragraph
This is a paragraph within a rich text block.
Typography Plain
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Utility Clickable
Utility Background Color
Utility Line Divider
Visual Frame
Media Overlay
Containers
u-container
default
u-container-small
small
u-container-full
full
u-container
is-full-m
full width on tablet
u-container
is-full-sm
full width on mobile
Sections
section
Colors
Text Color
clr-dark
--swatch--dark-900
clr-light
--swatch--light-100
clr-text-1
Theme: text
clr-text-2
Theme: text-2
clr-text-inverted
Theme: text-inverted
clr-brand
Brand: color
clr-brand-text
Brand: text
Background Color
u-bg-transparent
transparent !important
u-bg-1
Theme: background
u-bg-2
Theme: background-2
u-bg-skeleton
Theme: skeleton
u-bg-brand
Brand: color
Brand Modes
u-brand-green
Green
u-brand-yellow
Yellow
u-brand-light-gray
Light Gray
u-brand-dark
Dark
u-brand-theme
Brand mode: Theme
color = theme-text
text = theme-background
color = theme-text
text = theme-background
Theme Modes
u-theme-green
Theme mode
u-theme-pink
Theme mode
u-theme-blue
Theme mode: Base
u-theme-yellow
Theme mode: Base
u-theme-light
Theme mode: Base
u-theme-dark
Theme mode: Dark
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
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 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-inherit
u-gap-gutter
u-gap-margin
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-gutter
u-row-gap-margin
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
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-block
Block
u-display-inline
Inline
u-display-inline-block
inline-block
u-display-inline-flex
inline-flex
u-display-inline-grid
inline-grid
u-display-contents
contents
u-display-contents-md
Medium
u-display-contents-sm
Small
u-display-contents-xs
XSmall
u-display-flex-md
Tablet
u-display-flex-sm
Small
u-display-flex-xs
XSmall
u-display-block-md
Tablet
u-display-block-sm
Small
u-display-block-xs
XSmall
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-link
u-hide-if-empty-img
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
[fx-underline]
Default
Reverse
fx-scale
Trim
u-trim-border-*
Trim Border Bottom
Trim Border Top
Trim Border Left
Trim Border Right
Other Utilities
u-font-size-inherit
font-size: inherit !important
u-font-inherit
Inherit's all font properties from parent
u-text
Flexbox with all Text Style props applied. All children inherit max-width
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
margin-inline: auto
u-my-auto
margin-block: auto
u-sr-only
This can only be read by screen readers
u-pointer-off
u-pointer-on