Font Styles
.display
Display
Display
.display-small
Display Small
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-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.
.eyebrow
eyebrow
This is an eyebrow
.subhead
Subhead
This is a subheading
.quote
Quote
This is a quote
.caption
Caption
This is a caption
Typographic Elements
All Links in Paragraphs

This is a paragraph with a link

All Blockquotes
Lorem ipsum dolor sit amet, consectetur
All Ordered List
  1. Item 1
  2. Item 2
  3. Item 3
All Unordered List
  • Unordered list
  • when not inside
  • of rich text
  • Unordered list
  • when inside
  • of rich text
.checklist
  • .checklist-item
  • .checklist-item
Font Weight
.fw-regular
font-weight: 400
.fw-medium
font-weight: 500
.fw-semibold
font-weight: 600
.fw-bold
font-weight: 700
Text Transform
.u-uppercase
Lorem ipsum
.u-capitalize
Lorem ipsum
.u-underline
Lorem ipsum
Text Align
.text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-center-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-center-sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-center-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-left-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-left-sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-left-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.text-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Wrap
.u-font-inherit
Inherits the font size, weight, text-transform, letter-spacing, and wrapping.
.tw-wrap
Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.
.tw-balance
Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.
.tw-pretty
Ensures there's more than one word on the last line of text. Ideal for long form content.
.no-wrap
Text does not wrap
.no-wrap.normal-m
Lorem ipsum dolor sit amet
.no-wrap.normal-sm
Lorem ipsum dolor sit amet
.no-wrap.normal-xs
Lorem ipsum dolor sit amet
Line Clamp
.line-clamp-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
.line-clamp-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
.line-clamp-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
.line-clamp-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor
Colors
.clr-fade-70
currentColor with 70% opacity
.clr-fade-50
currentColor with 50% opacity
.clr-fade-20
currentColor with 20% opacity
.clr-dark
dark: dark-brown
.clr-light
light: white
.clr-brand
brand: orange
.clr-white
white
.clr-off-white
off-white
.clr-orange
orange
.clr-dark-brown
dark-brown
.clr-brown
brown
.clr-gray
gray
.clr-light-gray
light-gray
Buttons
Buttons
.btn
Default
.btn.is-outline
Default
Links
.arrow_btn (Btn / Arrow / Right)
Arrow Link
.arrow_btn (Btn / Arrow / Left)
Arrow Link
Hover Effects
.fx-fade-in
[fx-fade="in"]
.fx-fade-out
[fx-fade="out"]
.fx-underline
[fx-underline]
Default
.is-reverse
.fx-scale
[fx-scale]
Icons
Rich Text
.u-rich-text

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph margin-block: var(--flow, 1em)

  • List item
  • List item
  1. List item
  2. List item

Text link

Bold: var(--bold, 600)

Italic text

.rich-text

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Link

Bold

Blockquote
Caption
  • List item
  • List item
  1. List item
  2. List item
.g_heading_wrap

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold text - color: var(--accent, currentColor)

Italic Text

Forms
CTA Form (Component)
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.input_row
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Grid
Grid Utilities
.u-grid
custom grid
.u-grid-flex
flexbox with gutter gap
.u-grid-desktop
12-column grid; Vertical Flex on Tablet
.u-grid-tablet
12-column grid; Vertical Flex on Mobile
.u-grid-2
2-column grid
.u-grid-3
3-column grid
.u-grid-4
4-column grid
.u-grid-breakout
.u-grid-autofit
.u-grid-autofill
Column Utilities
.u-col
.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-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet
Flexbox
Horizontal Flex Utilities
.u-hflex
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
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
Other Flex Utilities
.u-align-inherit
u-flex-shrink
u-flex-grow
u-flex-noshrink
Other Utilities
Gap
.u-gap-inherit
.u-gap-gutter
.u-gap-small
.u-gap-main
.u-gap-large
.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
Margin Bottom
.u-mb-small
margin-bottom
.u-mb-main
margin-bottom
.u-mb-large
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-10
margin-bottom
Margin Top
.u-mt-small
margin-top
.u-mt-main
margin-top
.u-mt-large
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-10
margin-top
Sizing
.u-width-full
width: 100%
.u-width-fit
width: fit-content
.u-height-full
height: 100%
.u-height-fit
height: fit-content
.u-height-screen
min-height: 100svh
.u-cover
width: 100%; height: 100%;
.u-cover-absolute
width: 100%; height: 100%;
position: absolute;
Display
.u-inline
display: inline
.u-inline-block
display: inline-block
.u-inline-flex
display: inline-flex
.u-hide
display: none
.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-m
hide on tablet (medium)
.u-hide-sm
hide on mobile landscape (small)
.u-hide-xs
hide on mobile portrait (extra-small)
Overflow
.u-overflow-clip
overflow: clip
.u-overflow-hidden
overflow: hidden
.u-overflow-visible
overflow: visible !important
Object-fit
.u-fit-contain
.u-fit-cover
Shadow
.u-shadow-1
.u-shadow-2
Other
.u-container
container
.u-my-auto
margin-block: auto;
.u-mx-auto
margin-inline: auto;
.u-margin-trim
[data-margin-trim]
removes the top and bottom margin from child elements that touch the edge of parent's container
.u-child-contain
[data-child-contain]
all child elements become inline-block and inherit max-width
.u-no-scrollbar
[data-no-scrollbar
.u-sr-only
This can only be read by screen readers
.u-pointer-on
.u-pointer-off
Sections
.section
.section.p-none
.section.p-small
.section.p-large