Typography

Text Styles

heading-style-display

Heading

heading-style-h1

Heading

heading-style-h2

Heading

heading-style-h3

Heading

heading-style-h4

Heading

heading-style-h5
Heading
heading-style-h6
Heading
text-size-large

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

text-size-regular

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

text-size-small

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

text-size-tiny

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

Weights

text-weight-regular

Lorem ipsum dolor

text-weight-light

Lorem ipsum dolor

text-weight-bold

Lorem ipsum dolor

Line Clamp

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.

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.

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.

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

text-align-left

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

text-align-center

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

text-align-right

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

Text Transform

text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.

Typography Elements

text-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure
Ordered List
  1. Ordered list
  2. when not inside
  3. of rich text
  1. Ordered list
  2. when inside
  3. of rich text
Unordered List
  • Unordered list
  • when not inside
  • of rich text
  • Unordered list
  • when inside
  • of rich text
Block Quotes
Block quote when not inside of a rich text element
Block quote when inside of a rich text element

Color

Themes

theme-light

Heading

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

Button Text
theme-dark

Heading

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

Button Text
brand-color-1

Heading

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

Button Text
brand-color-2

Heading

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

Button Text
brand-color-3

Heading

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

Button Text

Text Color

text-color-inherit

Lorem ipsum dolor

text-color-faded

Lorem ipsum dolor

Flexbox

Horizontal Flex Utilities

hflex-left-top
hflex-left-center
hflex-left-bottom
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
hflex-right-stretch
hflex-between-top
hflex-between-center
hflex-between-bottom
hflex-between-stretch

Vertical Flex Utilities

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

Align Self Utilities

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

Align Items Utilities

align-items-stretch
align-items-start
align-items-center
align-items-end

Other Flex Utilities

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

Grid

Grid Utilities

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

Column Utilities

column-custom
column-full
column-indent
column-1
column-2
column-3
column-4
column-5
column-6
column-7
column-8
column-9
column-10
column-11
column-12

Order Utilities

order-first
order-first-desktop
order-first-tablet
order-last
order-last-desktop
order-last-tablet

Sizes

Gap Utilities

gap-inherit
gap-gutter
gap-0
gap-1
gap-2
gap-3
gap-4
gap-5
gap-6
gap-7
gap-8

Row Gap Utilities

gap-row-inherit
gap-row-gutter
gap-row-0
gap-row-1
gap-row-2
gap-row-3
gap-row-4
gap-row-5
gap-row-6
gap-row-7
gap-row-8

Margin Top Utilities

mt-gutter
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
mt-7
mt-8

Margin Bottom Utilities

mb-gutter
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
mb-7
mb-8

Border Radius Utilities

radius-none
radius-inherit
radius-xsmall
radius-small
radius-main
radius-large
radius-round

Aspect Ratios

ratio-2-1
ratio-16-9
ratio-3-2
ratio-1-1
ratio-2-3
ratio-custom

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"
Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Box Shadows
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Max Widths
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Miscellaneous

Display Utilities

display-block
display-inline-block
display-inline-flex
display-inline-grid
display-inline
display-none
hide-if-empty
hide-if-empty-cms

Overflow Utilities

overflow-visible
overflow-hidden
overflow-clip
overflow-scroll
overflow-auto
overflow-x-auto
overflow-y-auto
overflow-hidden-left

Z-Index Utilities

zindex-negative
zindex-0
zindex-unset
zindex-1
zindex-2
zindex-3

Position Utilities

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

Other Utilities

text-margin-none
margin-trim-off
child-contain
block-gap
block-gap-vertical
pointer-on
pointer-off
min-height-screen
max-width-none
width-full
height-full
cover
cover-absolute
visual-wrap
container
container-small
container-full
sr-only
sr-only
margin-inline-auto

Card

card-padding-small
card-padding
card-padding-large

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.