Stay connected with us

Contact

Us





    Client-First — Version 2.1

    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
    padding-global
    padding-section-small
    padding-section-medium
    padding-section-large
    button-group

    Headings

    HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

    H1

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

    heading-style-h1

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

    H2

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

    heading-style-h2

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

    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.

    heading-style-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.

    heading-style-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.
    heading-style-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-style-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.

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

    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-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
    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 text-style-2lines

    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 Weights

    text-weight-xbold
    text-weight-xbold
    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-weight-light
    text-weight-light

    Text Alignments

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

    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

    Colors

    Manage recurring text and background colors.

    Text Colors

    text-color-primary
    text-color-primary
    text-color-secondary
    text-color-secondary
    text-color-alternate
    text-color-alternate

    Background Colors

    background-color-primary
    background-color-secondary
    background-color-tertiary
    background-color-alternate

    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-auto
    pointer-events-none
    layer
    spacing-clean
    align-center
    z-index-1
    z-index-2
    inherit-color
    aspect-ratio-square
    aspect-ratio-portrait
    aspect-ratio-landscape
    aspect-ratio-widescreen

    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

    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. 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.
    nav_component