Masterplan 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.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present.
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 on your website. Sample text is being used as a placeholder for real text that is normally present.
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 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.
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.
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
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 on your website.
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 on your website. 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 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
Sample text is being used as a placeholder.
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
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 Alignments
Colors
Manage recurring text and background colors.
Text Colors
Background Colors
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Spacers
Unified spacer system for the project.
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
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.
- 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.
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.
Design Elements
Global design elements that can be copied here and pasted/used on all pages.
Make sure
is also combo class of all
/
,
and
.
Here's space for content (Tab 1)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 2)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 3)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 4)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 5)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Make sure
is also combo class of all
and
.
Font color inside tab panes will be changed by adding combo class
or similar dark background color to parent section.
Here's space for content (Tab 1)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 2)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 3)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 4)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Here's space for content (Tab 5)
The tab panels can be filled as required, for example with simple text or grids (e.g. text on the left, image on the right). Make sure that you either use existing global classes or name new individual classes with underscores.
Make sure to use combo classes for
/
in right order.
is another combo class you can use (after is-2 etc.)
01
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
02
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
03
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Time-Saving Reporting
Quick to Assign, Easy to Monitor
In just a few clicks, you can determine which employees and teams complete a mandatory training course. You can track who has started and successfully completed it at any time.
You see learning progress, completion rates and training details automatically and always up to date in the learning path overview. This makes time-consuming reporting a thing of the past.
01
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
02
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
03
Card Title
Card large title.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Time-Saving Reporting
Quick to Assign, Easy to Monitor
In just a few clicks, you can determine which employees and teams complete a mandatory training course. You can track who has started and successfully completed it at any time.
You see learning progress, completion rates and training details automatically and always up to date in the learning path overview. This makes time-consuming reporting a thing of the past.