StylesHeadersBodyCardsAccordionsDialogs & ModalsSlick SliderSlick Slider CenterComponents
Typography
Colors
Effects
Radius
UI Elements
Structure Classes
Max Content
Section Spacings
Paddings
Margins
Utility
Grids
Tooltip
Other
Typography
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
Heading Classes
heading-huge

heading-huge

heading-xxxl

heading-xxxl

heading-xxl

heading-xxl

heading-xl

heading-xl (H1)

heading-l

heading-l (H2)

heading-m

heading-m (H3)

heading-sm

heading-sm (H4)

heading-xs

heading-xs (H5)

heading-xxs

heading-xxs (H6)

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

  • No bullet list

  • No bullet list

All Ordered Lists

  1. No bullet list

  2. No bullet list

  3. No bullet list

Paragraph Sizes
paragraph-md

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.

paragraph

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.

paragraph-sm

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.

paragraph-xs

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.

Additional (Eyebrows and labels)
eyebrow-rg
eyebrow-rg
label-rg
label-rg
label-small
label-small
label-xsmall
label-xsmall
caption
caption
Additional (Navigation)
nav-header
nav-header
Text Weights
body
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)
heading
heading-weight-bold
heading-weight-bold
heading-weight-semibold
heading-weight-semibold
heading-weight-medium
heading-weight-medium
heading-weight-normal
heading-weight-normal
Text Styles
text-italic
text-italic
text-allcaps
text-allcaps
text-nowrap
text-nowrap
text-quote
text-quote
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 Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
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
Colors
Background
background-primary-light
background-secondary-light
background-tertiary-light
background-primary-dark
background-secondary-dark
background-tertiary-dark
Text Color
text-primary-accent
text-primary-accent
text-secondary-accent
text-secondary-accent
text-tertiary-accent
text-tertiary-accent
text-primary-dark
text-primary-dark
text-secondary-dark
text-secondary-dark
text-tertiary-dark
text-tertiary-dark
text-primary-light
text-primary-light
text-secondary-light
text-secondary-light
text-tertiary-light
text-tertiary-light
Effects
Box Shadows
shadow-tiny
shadow-small
shadow-medium
Radius

radius-zero

radius-xs

radius-sm

radius-m

radius-xm

radius-l

radius-xl

radius-xxl

radius-huge

radius-round

UI Elements
Buttons
button
button
is-secondary
button
is-tertiary
button
is-text
Button
link
button
is-icon-only
Dark BG
button
button
is-secondary
is-alternate
button
is-tertiary
is-alternate
button
is-text
is-alternate
Button
button
is-text
is-alternate
is-orange
Button
link
is-alternate
Text Link
button
is-icon-only
is-alternate
Form Elements (Webflow)
form-field-label
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
form-toggle (a checkbox)
form-radio
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
To use Forms on a dark background, simply use the add-on class is-alternate
form-field-label
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
form-toggle (a checkbox)
form-radio
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

Icons (HTML Embed)

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

Structure Classes
container
flex-container
container-large
container-narrow
container-medium
container-small
button-group
button-group
is-center
horizontal-item
horizontal-items
gap-l
gap-m
gap-s
gap-xs
gap-xxs
gap-tiny
Max Width Content
max-width-content-l
max-width-content-xl
max-width-content
max-width-content-m
max-width-content-s
max-width-880
max-width-480
max-width-452
max-width-420
max-width-360
max-width-272
Section Spacings
Section Spacings
section-spacing-m
section-spacing-l
section-spacing-xl
section-spacing-xxl
Top Section Spacings
section-spacing-top-m
section-spacing-top-l
section-spacing-top-xl
section-spacing-top-xxl
Bottom Section Spacings
section-spacing-bot-m
section-spacing-bot-l
section-spacing-bot-xl
section-spacing-bot-xxl
Paddings
Full Paddings
padding-0
padding-s
padding-m
padding-l
padding-xl
Top Paddings
padding-top-0
padding-top-tiny
padding-top-xxs
padding-top-xs
padding-top-s
padding-top-m
padding-top-l
padding-top-xl
padding-top-xxl
Bottom Paddings
padding-bot-0
padding-bot-tiny
padding-bot-xxs
padding-bot-xs
padding-bot-s
padding-bot-m
padding-bot-l
padding-bot-xl
padding-bot-xxl
Top Bottom Paddings
padding-top-bot-0
padding-top-bot-tiny
padding-top-bot-xxs
padding-top-bot-xs
padding-top-bot-s
padding-top-bot-m
padding-top-bot-l
padding-top-bot-xl
padding-top-bot-xxl
Other Paddings
padding-left-0
padding-right-0
padding-left-right-0
padding-left-right-0-tablet
Margins
Top Margins
margin-top-0
margin-top-tiny
margin-top-xxs
margin-top-xs
margin-top-s
margin-top-m
margin-top-l
margin-top-xl
margin-top-xxl
margin-top-huge
Bottom Margins
margin-bot-0
margin-bot-tiny
margin-bot-xxs
margin-bot-xs
margin-bot-s
margin-bot-m
margin-bot-l
margin-bot-xl
margin-bot-xxl
margin-bot-huge
Top Bottom Margins
margin-top-bot-0
margin-top-bot-tiny
margin-top-bot-xxs
margin-top-bot-xs
margin-top-bot-s
margin-top-bot-m
margin-top-bot-l
margin-top-bot-xl
margin-top-bot-xxl
margin-top-bot-huge
Utility Classes
hide
This element is hidden
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
show-tablet
show-mobile-landscape
show-mobile-portrait
overflow-visible
overflow-hidden
align-center
content-center
z-index-1
z-index-2
aspect-ratio-square
aspect-ratio-landscape
aspect-ratio-widescreen
Grids
2-col-grid
3-col-grid
3-col-grid
2-col-tablet
4-col-grid
5-col-grid
6-col-grid
Tooltip
tooltip - https://www.flowbase.co/booster/tooltips
tooltip - flowbase example
Other
opacity-0
opacity-0
border-white
border-salmon
border-green-dark
border-green-dark