Client-First — Version 2

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
container-large
padding-global
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.

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.

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.

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.

All links
All Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Buttons

Button combo class system.

button
Contact us
button
is-small
Button
button
is-large
Button
button
is-secondary
Button Text
button
is-text

Button Text

show-arrow

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