Client-First Version 2.0

Style Guide

Client-first is a set of guidelines and strategies created by Finsweet to help you build Webflow websites. 


Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
container-small
container-medium
container-large
container-x-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
padding-section-xlarge
button-group

HTML Heading Tags

HTML tags define default Heading styles.

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

heading-style-display

Sample text helps you understand how real text may look.

heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look.

heading-style-h4

Sample text helps you understand how real text may look.

heading-style-h5
Sample text helps you understand how real text may look.
heading-style-h6
Sample text helps you understand how real text may look.

Alternate Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

alt-heading-style-h1

Sample text helps you understand how real text may look.

alt-heading-style-h2

Sample text helps you understand how real text may look.

alt-heading-style-h3

Sample text helps you understand how real text may look.

alt-heading-style-h4

Sample text helps you understand how real text may look.

alt-heading-style-h5
Sample text helps you understand how real text may look.
alt-heading-style-h6
Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons with white backgrounds

Button when the background is white / transparent

button
Button text
button
is-medium
Button text
button
is-large
Button text
button-secondary
Button text
button-secondary
is-medium
Button text
button-secondary
is-large
Button text
button-tertiary
Button text
button-tertiary
is-medium
Button text
button-tertiary
is-large
Button text
button-ghost
Button text

Buttons with dark backgrounds

Button when the background is dark

button
Button text
button
is-medium
Button text
button
is-large
Button text
button-secondary
Button text
button-secondary
is-medium
Button text
button-secondary
is-large
Button text
button-tertiary
Button text
button-tertiary
is-medium
Button text
button-tertiary
is-large
Button text
button-ghost
Button text

Hyperlinks

Hyperlinks

text-link
text-link
text-link-secondary
text-link-secondary

Colors

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Text Colors

text-color-grey3
text-color-grey3
text-color-grey4
text-color-grey4
text-color-grey5
text-color-grey5
text-color-grey6
text-color-grey6
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-gradient
text-color-gradient
text-color-success
text-color-success
text-color-error
text-color-error

Box Shadow

box-shadow-1

Background Colors

background-color-white
background-color-grey1
background-color-grey2
background-color-grey3
background-color-grey6
background-color-gradient
background-color-primary0
background-color-secondary0

Max widths

Set max-width CSS property to any element.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxxlarge
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Paddings

Unified padding system for the project.

Padding Vertical

padding-0
padding-vertical-tiny
padding-vertical-xxsmall
padding-vertical-xsmall
padding-vertical-small
padding-vertical-medium
padding-vertical-large
padding-vertical-xlarge
padding-vertical-xxlarge
padding-vertical-huge
padding-vertical-xhuge

Padding Top

padding-top0
padding-top-tiny
padding-top-xxsmall
padding-top-xsmall
padding-top-small
padding-top-medium
padding-top-large
padding-top-xlarge
padding-top-xxlarge
padding-top-huge
padding-top-xhuge

Padding Bottom

padding-bottom0
padding-top-tiny
padding-bottom-xxsmall
padding-bottom-xsmall
padding-bottom-small
padding-bottom-medium
padding-top-large
padding-top-xlarge
padding-top-xxlarge
padding-top-huge
padding-top-xhuge

Margins

Unified margin system for the project.

Margin Bottom

margin-bottom-0
margin-bottom-tiny
margin-bottom-xxsmall
margin-bottom-xsmall
margin-bottom-small
margin-bottom-medium
margin-bottom-large
margin-bottom-xlarge
margin-bottom-xxlarge
margin-bottom-huge
margin-bottom-xhuge

Margin Top

margin-bottom-0
margin-top-tiny
margin-top-xxsmall
margin-top-xsmall
margin-top-small
margin-top-medium
margin-top-large
margin-top-xlarge
margin-top-xxlarge
margin-top-huge
margin-top-xhuge

Layouts

Unified layouts system for the project.

Blocks | Inline-block | Inline

display-block
display-inline-block
display-inline

Flexbox

display-flex-vertical
display-flex-vertical
flex-v-center
display-flex-vertical
flex-v-left
display-flex-vertical
flex-v-right
display-flex-vertical
flex-v-stretch
display-flex-horizontal
display-flex-horizontal
flex-h-top
display-flex-horizontal
flex-h-end
display-flex-horizontal
flex-h-center
display-flex-horizontal
flex-h-stretch

Grid

display-grid2
display-grid2
medium-gap
display-grid2
large-gap
display-grid2
xlarge-gap
display-grid2
xxlarge-gap
display-grid3
display-grid4

None

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
show-tablet
This element is hidden
This element is hidden
show-mobile-landscape
This element is hidden
show-mobile-portrait
This element is hidden

Icons & Avatars

Sets a height or height and width of icons. Icon 1x1 sets both width and height values.

icon-wrapper-small
icon-wrapper-medium
icon-wrapper-large
icon-xxsmall
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
avatars

Utility Classes

Utility classes we like to use in most of our projects to build faster.

overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
relative
divider
border-radius10

Webflow Elements

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

form-wrapper
Thank you!
Your registration has been submitted. We’ll come back to you shortly.
Something is wrong.
Contact our support to get help.
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Placeholder
This is a placeholder image.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Placeholder
This is a placeholder image.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Placeholder
This is a placeholder image.

Sliders