Client-First — Version 2.2 BETA

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

section

wrapper

Headings

heading-style-display-normal

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

heading-style-h1-normal

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

heading-style-h1-normal

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

heading-style-h2-normal

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

heading-style-h2-normal

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

heading-style-h3-normal

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.

heading-style-h3-normal

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.

heading-style-display-Brand

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

heading-style-h1-Brand

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

heading-style-h2-brand

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

heading-style-h2-brand

Heading

heading-style-h3-brand

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.

Text Classes

Text Sizes

text-size-x-large

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

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-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 on your website. Sample text helps you understand how real text may look on your website.

text-size-x-small

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

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-1line

This CSS style is not supported for Rich Texts on iOS.

text-style-2lines

This CSS style is not supported for Rich Texts on iOS.

text-style-3lines

This CSS style is not supported for Rich Texts on iOS.

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-style-balance

text-style-pretty

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

Other HTML Tags

HTML tags define default text styles.

All paragraphs

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

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.

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.

Buttons

Button combo class system.

button

View Courses

Colors

Manage recurring text and background colors.

Text Colors

text-color-black

text-color-primary

text-color-white

text-color-alternate

text-color-grey

text-color-primary

Background Colors

background-color-modeling

background-color-computation

background-color-bim

background-color-viz

background-color-immersive

background-color-ai

background-color-fabrication

background-color-black

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

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Grid System

12 Col Grid System

Container

Row

Column

Col

Desktop

col-lg-1

col-lg-11

col-lg-2

col-lg-10

col-lg-3

col-lg-9

col-lg-4

col-lg-8

col-lg-5

col-lg-7

col-lg-6

col-lg-12

Tablet

col-md-1

col-md-11

col-md-2

col-md-10

col-md-3

col-md-9

col-md-4

col-md-8

col-md-5

col-md-7

col-md-6

col-md-12

md-no-margin

Mobile

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-12

xs-no-margin

Margin

col

Properties

Align start

Align center

Align end

Align stretch

Justify start

Justify center

Justify end

Justify between

Justify around

Display

md--hide

sm--hide

xs--hide

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-Micro-1

padding-Micro-2

padding-Micro-3

padding-small-1

padding-small-2

padding-small-1

padding-medium-1

padding-medium-2

padding-medium-3

padding-large-1

padding-large-2

padding-large-3

padding-macro-1

padding-macro-2

padding-macro-3

Margins

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

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

margin-0

MARGIN-MICRO-1

MARGIN-MICRO-2

MARGIN-MICRO-3

MARGIN-SMALL-1

MARGIN-SMALL-2

MARGIN-SMALL-3

MARGIN-MEDIUM-1

MARGIN-MEDIUM-2

MARGIN-MEDIUM-3

MARGIN-LARGE-1

MARGIN-LARGE-2

MARGIN-LARGE-3

MARGIN-MACRO-1

MARGIN-MACRO-2

MARGIN-MACRO-3

Spacers

Unified spacer system for the project.

SPACER-MICRO-1

SPACER-MICRO-2

spacer-micro-3

spacer-small-1

spacer-small-2

spacer-small-3

spacer-medium-1

spacer-medium-2

spacer-medium-3

spacer-large-1

spacer-large-2

spacer-large-3

spacer-macro-1

spacer-macro-2

spacer-macro-3

spacer-100vh

spacer-nav-bar

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

hide-mobile-portrait

overflow-visible

overflow-hidden

overflow-auto

overflow-clip

overflow-scroll

pointer-events-auto

pointer-events-none

align-center

Webflow elements

Native Webflow elements with Client-First classes applied.

text-rich-text-styled

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