Style Guide

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

Buttons

Button combo class system.

button

Button Text

button

is-small

Button Text

button

is-large

Button Text

button

is-secondary

Button Text

button

is-text

Button Text

button

is-icon

Button Text

button

is-secondary

is-icon

Button Text

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

HTML Heading Tags

HTML tags define default Heading styles.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel nulla vulputate, pellentesque odio ut, malesuada lorem. Vivamus mollis nulla ligula, eu mattis eros cursus a. Curabitur gravida faucibus dui vel finibus. Aliquam viverra quam vel augue facilisis tristique. Donec non sem diam. Vestibulum nisi nibh, pretium non molestie eu, bibendum et tortor. Morbi eleifend libero id ipsum dictum, ut mollis dolor euismod. Quisque eu erat sit amet dolor ultrices commodo consectetur quis velit. Mauris hendrerit, odio sed mattis efficitur, magna magna congue est, sed semper odio purus eget ante.

All links

All Links

All quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel nulla vulputate, pellentesque odio ut, malesuada lorem. Vivamus mollis nulla ligula, eu mattis eros cursus

All Ordered Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

All Unordered Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

Heading Styles

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

heading-style-h1

Lorem ipsum dolor sit amet,

heading-style-h2

Lorem ipsum dolor sit amet,

heading-style-h3

Lorem ipsum dolor sit amet,

heading-style-h4

Lorem ipsum dolor sit amet,

heading-style-h5

Lorem ipsum dolor sit amet,

heading-style-h6

Lorem ipsum dolor sit amet,

Text Classes

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

Text Sizes

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel

text-style-2lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel nulla vulputate, pellentesque odio ut, malesuada lorem. Vivamus mollis nulla ligula, eu mattis eros cursus

text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel nulla vulputate, pellentesque odio ut, malesuada lorem. Vivamus mollis nulla ligula, eu mattis eros cursus

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Colors

Manage recurring text and background colors.

Color Palette

#00000

#f5f5f5

#fffff

Text Colors

text-color-black

text-color-grey

text-color-white

Background Colors

background-color-black

background-color-grey

background-color-white

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

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-custom1

padding-custom2

padding-custom3

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

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-custom1

margin-custom2

margin-custom3

Spacers

Unified spacer system for the project.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Useful utility systems

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

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

u_Height-full

u_Layout-hCenter

u_Layout-vCenter

u_Spacing-zero

z-index-2

display-inlineflex

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript