Button Style Guide
This style guide is based on the Finsweet Client First 2.0 system and contains the most important guidelines and classes for a clean, structured Webflow project.
Page Structure
Page structure classes
page-wrapper
Wraps all elements on the page
main-wrapper
Wraps all sections
section-[name]
Wraps one section
global-padding
Manages horizontal spacing
container-[size]
Manages container spacing
padding-section-[size]
Manages spacing between sections
Grids
grid-4-across-max-250
grid-3-across-max-325
grid-2-across-max-430
Typography
HTML 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
Heading Classes
heading-style-h1
Heading 1
heading-style-h2
Heading 2
heading-style-h3
Heading 3
heading-style-h4
Heading 4
heading-style-h5
Heading 5
heading-style-h6
Heading 6
Other HTML Tags
All Paragraphs
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
All Links
All LinksAll Unordered Lists
List item
List item
All Unordered Lists
List item
List item
All Ordered Lists
List item
List item
List item
All Block Quotes
This text is used as a placeholder so you can see how your content will look in your project according to your settings.
Text Sizes
text-size-gigantic
Lorem ipsum
text-size-xxhuge
Lorem ipsum
text-size-xhuge
Lorem ipsum
text-size-huge
Lorem ipsum
text-size-xxlarge
Lorem ipsum
text-size-xlarge
Lorem ipsum
text-size-large
Lorem ipsum
text-size-medium
Lorem ipsum
text-size-regular
Lorem ipsum
text-size-small
Lorem ipsum
text-size-tiny
Lorem ipsum
Text Weights
text-weight-black
text-weight-black (900)
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)
Text Line Heights
text-lineheight-xtall
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-lineheight-tall
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-lineheight-normal
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-lineheight-short
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-lineheight-xshort
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-lineheight-none
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
Text Letter Spacings
text-letterspacing-xwide
Lorem ipsum dolor sit amet
text-letterspacing-wide
Lorem ipsum dolor sit amet
text-letterspacing-normal
Lorem ipsum dolor sit amet
text-letterspacing-tight
Lorem ipsum dolor sit amet
text-letterspacing-xtight
Lorem ipsum dolor sit amet
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-underline
This is some text inside of a div block.
text-style-nodecoration
This is some text inside of a div block.
text-style-link
text-style-2lines
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-style-3lines
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
text-style-muted
text-style-muted
tagline-text
tagline-text
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 1
margin-top: 2 rem
margin-bottom: 1.5 rem
Heading 2
Heading 2
margin-top: 1.5 rem
margin-bottom: 1 rem
Heading 3
Heading 3
margin-top: 1.5 rem
margin-bottom: 1.5 rem
Heading 4
Heading 4
margin-top: 1.5 rem
margin-bottom: 1.25 rem
Heading 5
Heading 2
margin-top: 1.25 rem
margin-bottom: 1 rem
Heading 6
Heading 2
margin-top: 1.25 rem
margin-bottom: 1 rem
This text is used as a placeholder so you can see how your content will look in your project according to your settings. This text is a sample text, its appearance will change with the settings on the corresponding class.
This is a link within a rich text
- List item
- List item
- List item
- List item
- List item
- List item
This is a block quote
Footer Rich Text
text-rich-text
Colors
Background Colors
background-color-primary
background-color-secondary
background-color-tertiary
background-color-quaternary
background-color-darker
background-color-light
background-color-white
Border Colors
border-color-dark
border-color-light
Background Utility Colors
background-color-success
background-color-warning
accessible-outline-color
Background Gradient & Pattern Colors
background-color-gradient1
background-color-gradient2
Text Colors
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-tertiary
text-color-tertiary
text-color-quaternary
text-color-quaternary
text-color-quinary
text-color-quinary
text-color-white
text-color-white
Link Colors
link-color-primary
link-color-primary
link-color-light
link-color-light
Icons
Sizes
icon-xxsmall
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-[custom]
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-[custom]
Icons (HTML Embed)
Control icon color on hove with HTML Embed
Control icon color on hove with HTML Embed
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-[custom]
Form
Form Elements
Images
Sizes
image-wrapper-1x1
image-wrapper-4x3
image-wrapper-3x2
image-wrapper-16x9
image-wrapper-[custom]
Effects
Box Shadows
Add shadows by positioning elements on a Z axis.
Add shadows by positioning elements on a Z axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Spacing System
Margin
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-[custom]
Margin alignment
margin-top
margin-[size]
margin-bottom
margin-[size]
margin-left
margin-[size]
margin-right
margin-[size]
margin-vertical
margin-[size]
margin-horizontial
margin-[size]
Padding
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-[custom]
Padding alignment
padding-top
padding-[size]
padding-bottom
padding-[size]
padding-left
padding-[size]
padding-right
padding-[size]
padding-vertical
padding-[size]
padding-horizontal
padding-[size]
Section alignment
padding-section
padding-section-small
padding-section-medium
padding-section-large
Container System
Define your container sizes.
container-large
container-medium
container-small
Max width
Define the maximum width of your elements.
max-width-full
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Max width full
max-width-full-tablet
Full width from tablet resolution
max-width-full-mobile-landscape
Full width from mobile landscape resolution
max-width-full-mobile-portrait
Full width from mobile portrait resolution
Useful classes
Hide and show classes
hide
Hide on all devices
hide-tablet
Hide from tablet resolution
hide-mobile-landscape
Hide from mobile landscape resolution
hide-mobile-portrait
Hide from mobile portrait resolution
show
Show on all devices
show-tablet
Show from tablet resolution
show-mobile-landscape
Show from mobile landscape resolution
show-mobile-portrait
Show from mobile portrait resolution
Utility classes
spacing-clean
Cleans all spacings
z-index-1
Puts your element on level 1
z-index-2
Puts your element on level 2
align-center
All elements are aligned centrally
clickable-off
Makes element not clickable
clickable-on
Makes element clickable
overflow-hidden
Disables overflow
overflow-scroll
Enables overflow scrolling
overflow-auto
Enables auto overflow