Colors
bg-light
bg-light-grey
bg-grey
bg-dark-grey
bg-dark
bg-brand
bg-background
bg-foreground
bg-darkblue
bg-darkgreen
bg-darkgrey
bg-overlay
color-light
This is some text inside of a div block.
color-light-grey
This is some text inside of a div block.
color-grey
This is some text inside of a div block.
color-dark-grey
This is some text inside of a div block.
color-dark
This is some text inside of a div block.
color-brand
This is some text inside of a div block.
color-text
This is some text inside of a div block.
color-darkgreen
This is some text inside of a div block.
color-bodylight
This is some text inside of a div block.
color-bodydarkblue
This is some text inside of a div block.
color-bodydarkgreen
This is some text inside of a div block.
color-bodylightblue
This is some text inside of a div block.
Headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
h0

Heading 0

h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5

Heading 5

h6

Heading 6

Text Sizes
text-size-large

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

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

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

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.

Structure
page
main
section
container
Icons

icon-small

icon-regular

icon-large

Buttons
Component Based
Button / Secondary
This is some text inside of a div block.
Button text
Button / Secondary / Small
Class Based
button
Button
button
is-small
Button
button
is-secondary
Button
button
is-secondary
is-small
Button
Component Based
Button / Alt
This is some text inside of a div block.
Button text
Button / Alt / Small
This is some text inside of a div block.
Button text
Button / Alt / Secondary
This is some text inside of a div block.
Button text
Button / Alt / Secondary / Small
This is some text inside of a div block.
Button text
Class Based
button
is-alternate
Button
button
is-alternate
is-small
Button
button
is-secondary
is-alternate
Button
button
is-secondary
is-small
is-alternate
Button
Other UI Elements
category-filter-link
View all
Category one
slider-arrow
View all
Category one
Tags
tag
Tag
tag
is-alternate
Tag
Forms
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
custom-select
  • List item
custom-select
is-open
  • List item
form_checkbox
form_radio
form_btn_wrap
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form_field-label
form_input
is-alternate
form_input
is-text-area
is-alternate
form_input
is-select-input
is-alternate
form_checkbox
is-alternate
form_radio
is-alternate
button
is-alternate
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich Text
rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Other HTML Tags
All Paragraphs

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.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists

  • No bullet list

  • No bullet list

All Unordered Lists

  • Bulleted list

  • Bulleted list

All Ordered Lists

  1. Ordered list

  2. Ordered list

  3. Ordered list

Utility classes
Utility / Text Styles
text-italic
text-italic
text-strikethrough
text-strikethrough
text-allcaps
text-allcaps
text-nowrap
text-nowrap
text-link
text-link
text-2lines
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-3lines
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. 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-muted
text-muted
text-color-white
text-color-white
Utility / Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Utility / Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Utility / Grid and group
grid
grid-2
grid-3
grid-4
grid-autofit
item-group
column-span-custom
column-span-full
column-span-indent
column-span-1
column-span-2
column-span-3
column-span-4
column-span-5
column-span-6
column-span-7
column-span-8
column-span-9
column-span-10
column-span-11
column-span-12
align-items-start
align-items-center
align-items-end
align-items-stretch
justify-content-start
justify-content-center
justify-content-end
Utility / Flex
flex-row-left-top
flex-row-left-center
flex-row-left-bottom
flex-row-left-stretch
flex-row-center-top
flex-row-center-center
flex-row-center-bottom
flex-row-center-stretch
flex-row-right-top
flex-row-between-top
flex-row-right-center
flex-row-between-center
flex-row-right-bottom
flex-row-between-bottom
flex-row-right-stretch
flex-row-between-stretch
flex-column-left-top
flex-column-center-top
flex-column-right-top
flex-column-stretch-top
flex-column-left-center
flex-column-center-center
flex-column-right-center
flex-column-stretch-center
flex-column-left-bottom
flex-column-left-between
flex-column-center-bottom
flex-column-center-between
flex-column-right-bottom
flex-column-right-between
flex-column-stretch-bottom
flex-column-stretch-between
flex-row-wrap
flex-column-wrap
gap-small
gap-regular
gap-large
gap-row-small
gap-row-regular
gap-row-small
justify-content-around
justify-content-between
justify-content-start
justify-content-center
justify-content-end
align-items-stretch
align-items-start
align-items-center
align-items-end
align-self-auto
align-self-start
align-self-center
align-self-end
align-self-stretch
justify-self-auto
justify-self-start
justify-self-center
justify-self-end
justify-self-end
justify-self-stretch
Utility / Width full
width-full
width-full_tablet
width-full_mobile
Utility / Max width
max-width-10ch
max-width-12ch
max-width-14ch
max-width-18ch
max-width-20ch
max-width-30ch
max-width-40ch
max-width-50ch
max-width-60ch
max-width-70ch
max-width-80ch
max-width-none
Utility / Others
hide
This element is hidden
hide_tablet
hide_mobile
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
image
spacing-clean
align-center
z-index-1
z-index-2
margin-top-auto
margin-bottom-auto
ratio-square
ratio-custom
width-full
height-full
Padding / Top
padding-0
padding-top-5px
padding-top-10px
padding-top-15px
padding-top-20px
padding-top-25px
padding-top-30px
padding-top-40px
padding-top-50px
padding-top-60px
padding-top-70px
padding-top-80px
padding-top-90px
padding-top-100px
padding-top-110px
padding-top-120px
padding-top-140px
padding-top-160px
padding-top-180px
padding-top-200px
padding-top-220px
Padding / Bottom
padding-0
padding-bottom-5px
padding-bottom-10px
padding-bottom-15px
padding-bottom-20px
padding-bottom-25px
padding-bottom-30px
padding-bottom-40px
padding-bottom-50px
padding-bottom-60px
padding-bottom-70px
padding-bottom-80px
padding-bottom-90px
padding-bottom-100px
padding-bottom-110px
padding-bottom-120px
padding-bottom-140px
padding-bottom-160px
padding-bottom-180px
padding-bottom-200px
padding-bottom-220px
Margin / Bottom
margin-0
margin-bottom-5px
margin-bottom-10px
margin-bottom-15px
margin-bottom-20px
margin-bottom-25px
margin-bottom-30px
margin-bottom-40px
margin-bottom-50px
margin-bottom-60px
margin-bottom-70px
margin-bottom-80px
margin-bottom-90px
margin-bottom-100px
margin-bottom-110px
margin-bottom-120px
margin-bottom-140px
margin-bottom-160px
margin-bottom-180px
margin-bottom-200px
margin-bottom-220px