Eyebrown
heading
description
Headings
h1
h1-style
h2
h2-style
h3
h3-style
h4
h4-style
h5
h5-style
h6
h6-style
Body
copy-xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
copy-l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body
copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
copy-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
copy-l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
copy-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
nav-link
footer_link
footer_heading
eyebrow
Eyebrow
Label
Label
content_list-item
Custom List
All Ordered Lists
content-list-order
content-list-order
- Example Ordered List
- Example Ordered List
- Example Ordered List
All Unordered Lists
content-list-dot
content-list-dot
- Example Unordered List
- Example Unordered List
button
image
Eyebrown
Eyebrown
Heading
description
Heading
heading
Margin Classes
mb-0
mb-4
mb-6
mb-8
mb-12
mb-8
mb-16
mb-24
mb--28
mb-32
mb-36
mb-32
mb-48
mb-56
mb-64
mb-64
mb-68
mb-80
mb-96
mb-100
mb-120
Margin Mobile Classes
m-mb-0
m-mb-4
m-mb-8
m-mb-12
m-mb-16
m-mb-20
m-mb-24
m-mb-28
m-mb-32
m-mb-36
m-mb-40
m-mb-48
m-mb-56
m-mb-64
m-mb-80
Colors Classes
bkg-dark
bkg-brand-1
bkg-brand-2
bkg-brand-3
bkg-brand-4
bkg-brand-5
bkg-brand-6
bkg-brand-7
bkg-brand-8
bkg-brand-9
bkg-brand-10
bkg-accent
bkg-accent-1
bkg-accent-2
bkg-accent-3
bkg-accent-4
bkg-accent-5
bkg-accent-6
bkg-accent-7
bkg-accent-8
bkg-accent-9
bkg-accent-10
text-main
text-secondary
text-tinted
text-light
text-white
color-accent
Text Dark
Section Padding Classes
py-xs
py-s
py-m
py-l
py-xl
py-xxl
pt-xs
pt-s
pt-m
pt-l
pt-xl
pt-xxl
pb-xs
pb-s
pb-m
pb-l
pb-xl
pb-xxl
m-py-xs
m-py-s
m-py-m
m-py-l
m-py-xl
m-py-xxl
m-pt-xs
m-pt-s
m-pt-m
m-pt-l
m-pt-xl
m-pt-xxl
m-pb-xs
m-pb-s
m-pb-m
m-pb-l
m-pb-xl
m-pb-xxl
Weight
weight-300
Lorem ipsum dolor
weight-400
Lorem ipsum dolor
weight-500
Lorem ipsum dolor
weight-600
Lorem ipsum dolor
weight-700
Lorem ipsum dolor
weight-900
Lorem ipsum dolor
Line Clamp
clamp-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
clamp-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
clamp-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. 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. Suspendisse varius enim in eros elementum tristique.
text-transform-uppercase
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-transform-capitalize
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text-transform-lowercase
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
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.
Flex Direction Utilities
flex-horizontal
flex-vertical
Align Self Utilities Vertical
flex-vertical.is-align-top
flex-vertical.is-align-center
flex-vertical.is-align-bottom
flex-vertical.is-justify-start
flex-vertical.is-justify-center
flex-vertical.is-justify-end
Align Self Utilities Horizontal
flex-horizontal.is-align-top
flex-horizontal.is-align-center
flex-horizontal.is-align-bottom
flex-horizontal.is-justify-start
flex-horizontal.is-justify-center
flex-horizontal.is-justify-end
1 Col Grid
Grid Item
Grid Item
Grid Item
2 Col Grid
Grid Item
Grid Item
Grid Item
Grid Item
3 Col Grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
4 Col Grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Display Utilities
display-block
display-flex
display-grid
display-none
display-inline-block
display-inline-flex
display-inline-grid
Overflow Utilities
overflow-visible
overflow-hidden
u-overflow-clip
overflow-x-auto
overflow-y-auto
Z-Index Utilities
u-zindex-negative
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3
Position Utilities
position-static
position-relative
position-absolute
position-fixed
position-sticky
Max Width
mw-56
mw-64
mw-72
mw-80
mw-88
mw-96
mw-104
mw-112
mw-120
mw-128
mw-136
mw-144
mw-152
mw-160
mw-168
mw-176
mw-184
mw-192
mw-200
mw-208
mw-216
mw-224
mw-232
mw-240
mw-248
mw-256
mw-264
mw-272
mw-280
mw-288
mw-296
mw-304
mw-312
mw-320
mw-328
mw-336
mw-344
mw-352
mw-360
mw-368
mw-376
mw-384
mw-392
mw-400
mw-408
mw-416
mw-424
mw-432
Rich Text Classes
Style-h1
Style-h2
Style-h3