Typography

Text Styles

display

Display

Heading

h1-md

h1-sm

Heading

h2-md

h2-sm

Heading

h3-md

h3-sm

Heading

text-xlarge

Text XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero

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.

quote

Quote

This is a quote

eyebrow

Eyebrow

This is an eyebrow

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

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-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.

u-line-height-huge

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 Modes

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.

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Transform

u-uppercase

Lorem ipsum

u-capitalize

Lorem ipsum

u-underline

Lorem ipsum

Text Wrap

u-text-nowrap

Prevents words from wrapping

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.

Rich Text

u-rich-text

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Spacing (margin): var(--flow)

u-heading-accent

Bold color: var(--_theme---accent)

Components

Global & Starter

Typography Tag

Tag

Typography Heading

Heading

Typography Paragraph

This is a paragraph within a rich text block.

Utility Clickable

Utility Background Color

Utility Line Divider

Visual Frame

Media Overlay

Buttons

btn

Button Main

is-secondary

is-outline

Default

Secondary

Outline

text_btn

Button Text

Button

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

u-panel

section

p-none

p-even

p-small

p-large

pb-0

pt-0

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-brand

--_brand---color

clr-brand-text

--_brand---color-text

clr-faded

current color with 60% opacity

Background Color

u-bg-1

--_theme---background

u-bg-2

--_theme---background-2

u-bg-brand

--_brand---color

Brand Modes

u-brand-mint

Brand mode: Base

u-brand-theme

Brand mode: Theme

Theme Modes

u-theme-dark

Theme mode: Base

u-theme-light

Theme mode: Light

Filters

u-filter-invert

Filter

Flexbox

Flex Direction

u-flex-row

u-flex-row-nowrap

u-flex-column

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

Other Flex Utilities

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Grid Utilities

u-grid

custom grid

u-grid-autofit

u-grid-autofill

u-grid-desktop

Vertical Flex on Tablet

u-grid-tablet

Vertical Flex on Mobile

u-grid-breakout

Column Utilities

u-col-indent

u-col-full

u-col-1

u-col-2

u-col-3

u-col-4

u-col-5

u-col-6

u-col-7

u-col-8

u-col-9

u-col-10

u-col-11

u-col-12

Order Utilities

u-order-first

u-order-last

u-order-2

u-order-3

Sizes

Gap

u-gap-inherit

u-gap-xsmall

u-gap-small

u-gap-main

u-gap-large

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-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

Margin Bottom

u-mb-auto

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

Margin Top

u-mt-auto

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

Border Radius

u-radius-none

u-radius-inherit

u-radius-small

u-radius-main

u-radius-large

u-radius-round

Width & Height

u-width-full

u-height-full

u-width-screen

min-width: 100vw

u-height-screen

min-height: 100svh

u-cover

u-cover-absolute

Miscellaneous

Display

u-display-contents

display: contents

u-display-inline

display: inline

u-display-inline-block

display: inline-block

u-display-inline-flex

display: inline-flex

u-display-inline-grid

display: inline-grid

u-show-above

Visible above container-threshold

u-show-below

Visible below container-threshold

u-hide-above

Hidden above containter-threshold

u-hide-below

Hidden below container-threshold

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

display: none

u-hide-m

hide on tablet (medium)

u-hide-sm

hide on mobile landscape (small)

u-hide-xs

hide on mobile portrait (extra-small)

Ungroup (display: contents)

u-ungroup-m

Tablet

u-ungroup-sm

Mobile Landscape

u-ungroup-xs

Mobile Portrait

Overflow

u-overflow-clip

overflow: clip

u-overflow-hidden

overflow: hidden

u-overflow-visible

overflow: visible !important

Z-index

u-zindex-negative

u-zindex-0

u-zindex-1

u-zindex-2

Object-fit

u-fit-cover

u-fit-contain

Hover Effects

fx-underline

[fx-underline]

Default

.is-reverse

fx-scale

[fx-scale]

Other Utilities

u-all-inherit

all: inherit. Useful for nested component slots

u-hide-empty

Hide if element if empty

u-hide-empty-cms

Hide if element if cms list is empty

u-child-contain

text-align and align-items are based on "Alignment" variable mode. 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-no-scrollbar

[data-no-scrollbar

u-mx-auto

margin-inline: auto

u-my-auto

margin-block: auto

u-sr-only

u-pointer-off

u-pointer-on