Structure

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

Page Structure

Defined and flexible core structure we can use on all or most pages.

Wrappers

page

Wrap the page

max-width: 100%

page

cc-horizontal

Use to wrap the page with side-bar navigation.

display: flex;
width: 100%;
flex-direction: row;

main

Used for main sections.

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
A default container acts as "12 columns", as it takes up the full design width (usually 1440px). That's why combo class names mention columns.

container

max-width: 88rem (1408px);
padding-right: 2rem (32px);
padding-left: 2rem;

Heading

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.

container

cc-medium

max-width: 72rem (1,152px);

Heading

container

cc-small

max-width: 56rem (896px);

Heading

Margin

Margin is useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

margin-top

margin-left

margin-right

margin-bottom

margin-horizontal

margin-vertical

margin-0

margin-2

margin-4

margin-8

margin-12

margin-16

margin-20

margin-24

margin-32

margin-40

margin-48

margin-64

margin-80

margin-96

margin-128

Padding

Margin is useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

padding-top

padding-left

padding-right

padding-bottom

padding-horizontal

padding-vertical

padding-0

padding-2

padding-4

padding-8

padding-12

margin-16

padding-20

padding-24

padding-32

padding-40

padding-48

padding-64

padding-80

padding-96

padding-128

Spacer

Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

spacer-2

spacer-4

spacer-8

spacer-12

spacer-16

spacer-20

spacer-24

spacer-32

spacer-40

spacer-48

spacer-64

spacer-80

spacer-96

spacer-128

Max Width

Control max width and other things

max-width-full

is-tablet

is-landscape

is-mobile

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Sections

Use the section class with its combo classes for all your sections to maintain consistency and avoid creating a new class for every new section. There are of course exceptions, but whenever possible, think of reusable ways to create elements.
These combo classes can be stacked.

If you find yourself stacking more than 3 classes, you should create a new combo class for that case.
You could also add more variations (i.e. cc-top-xl, cc-cta, ...)

section

Heading

padding-top: 5rem (80px);
padding-bottom: 5rem;

section

cc-top-0

Heading

padding-top: 0rem (0px);

section

cc-bottom-0

Heading

padding-bottom: 0rem (0px);

section

cc-top-sm

Heading

padding-top: 2.5rem (40px);

section

cc-bottom-sm

Heading

padding-bottom: 2.5rem (40px);

section

cc-top-lg

Heading

padding-top: 6rem (96px)

section

cc-bottom-lg

Heading

padding-bottom: 6rem (96px)

section

cc-hero

Heading

Hero sections are often unique compared to other sections, whether because of a fixed nav or just being 100vh.
Use this class for your hero sections if needed, or remove it and make your own.

Layout

Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.

We understand that grid isn't always perfect, unless you love grid, then it is. But with the power of flexbox and grid you can create some amazing layouts across all devices. So we went the extra mile and included tons of module stacks.

Create the stack you need, and if you're pushing the limit on combo classes, try using the "Merge Combo Classes" tool from {Finsweet.

Flex Stack

flex-stack

is-vertical

is-wrap-child

flex-stack

cc-align-start

cc-align-center

cc-align-end

flex-stack

cc-justify-center

cc-justify-end

cc-justify-between

flex-stack

has-gap-4

has-gap-8

has-gap-12

has-gap-24

Grid Stack

grid-stack

has-3col

has-4col

has-5col

is-horizontal

grid-stack

is-start

is-center

is-end

grid-stack

has-4gap

has-8gap

has-12gap

has-24gap

Examples

grid-stack

column

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

grid-cols defaults to 2 even columns. You can then add modifiers for different sizes or more columns.

column is just a div that is used inside a grid column. the reason it exists is to have some reusable combo classes for alignment, padding, etc

grid-stack

has-3col

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor

Adds another column to the grid. Might be useful for a blog grid.

grid-stack

is-horizontal

This modifier is useful for button groups, logos, or any time you want extra items to stack in one line. Columns are automatically generated

Images

image-wrapper

image-wrapper is a generic base class that has overflow hidden, position relative, and width 100%. This is useful to avoid creating a new class for standard-sized images in columns. It is also aligned top to avoid stretching for the whole column (you can change that by placing it in a flex parent). Use a combo class to give it full height.
If you have images with unique sizes and positioning, create a new class for it.

image

image is set to cover by default and has combo classes to control its aspect ratio or set it to contain. You can add more or modify them. Default:
cc-1x1 cc-4x3 cc-16x9

image

cc-contain

[name]-layout

Custom Layout

What's going on here?
This is what you would mostly use. This name can either be page-specifc or of a reusable component. Try to find opportunities to make things reusable, but don't overthink it. Just try not to have page-specific names for components you are using in multiple pages.
Plan well.

Text

title-wrapper

is-large

is-xlarge

Heading inside a title-wrapper

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Put titles inside a div with this class to give them bottom margin. Comes with combo classes for reducing or increasing the margin, but you can also add your own.

text-wrapper

cc-max-320

cc-align-center

Some heading

All this text is in a text-wrapper which constrains width. Even this paragraph got its own text-wrapper.

General purpose class to control text max-width and alignment.

Actions

cta-wrapper

Some heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a CTA

Similar to title and text wrappers, this class controls spacing, this time from the top. Use combo classes for different sizes and alignment.

Shape

shape-xsmall

shape-small

shape-medium

shape-large

shape-xlarge

shape-full

Utilities

Other useful utilities.

Custom Element

Custom element allows you to do soooo much more

hide

hide-tablet

hide-mobile

Use the class or attribute to hide elements

First elements are hidden on all breakpoints

Second elements are hidden on tablet

Last elements are hidden on mobile

show

show-tablet

show-mobile

hide-mobile

Use the class or attribute to hide elements

First elements are visible on all breakpoints

Second elements are visible on tablet - mobile

Last elements are visible on mobile only

display-inlineflex

Use the class or attribute to hide elements

pointer-events-off

pointer-events

off

Use the class or attribute to hide elements

pointer-events-auto

pointer-events

auto

Use the class or attribute to hide elements

align-center

spacing-clean

margin: 0;
padding: 0;

muted

opacity: 50%;

overflow-visible

overflow-hidden

overflow-visible

overflow-auto

Typography

Text elements and classes are used strictly for sizing, not styling.
Usually these elements are wrapped with a title-wrapper or a text-wrapper to have access to frequently used modifiers as combo classes.

Font

Font utilities change the font of an element.

font-display

Lorem ipsum dolor sit amet.

font-body

Lorem ipsum dolor sit amet.

Headings

HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.

Heading 1

text-h1

is-bold

HTML H1

Heading 1

font-family: var(--font--display);
font-size: var(--font-size--80);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--condensed);

Heading 2

text-h2

is-bold

HTML H2

Heading 2

font-family: var(--font--display);
font-size: var(--font-size--56);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--condensed);

Heading 3

text-h3

is-bold

HTML Heading 3

Heading 3

font-family: var(--font--display);
font-size: var(--font-size--40);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--condensed);

Heading 4

text-h4

cc-bold

HTML Heading 4

Heading 4

font-family: var(--font--display);
font-size: var(--font-size--28);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--narrow);

Heading 5

text-h5

cc-bold

HTML Heading 5

Heading 5

font-family: var(--font--display);
font-size: var(--font-size--22);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--narrow);

Heading 6

text-h6

cc-bold

HTML Heading 6

Heading 6

font-family: var(--font--display);
font-size: var(--font-size--17);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--narrow);

Body

Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.

text-xl

font-family: var(--font--body);
font-size: var(--font-size--28);
line-height: var(--line-height--medium);
letter-spacing: var(--letter-space--narrow);

text-lg

font-family: var(--font--body);
font-size: var(--font-size--22);
line-height: var(--line-height--medium);
letter-spacing: var(--letter-space--narrow);

text-base

font-family: var(--font--body);
font-size: var(--font-size--17);
line-height: var(--line-height--medium);
letter-spacing: var(--letter-space--regular);

text-sm

font-family: var(--font--body);
font-size: var(--font-size--14);
line-height: var(--line-height--medium);
letter-spacing: var(--letter-space--wide);

text-xs

font-family: var(--font--body);
font-size: var(--font-size--12);
line-height: var(--line-height--large);
letter-spacing: var(--letter-space--extra-wide);

paragraph

font-size: not set (resets to base)
line-height: not set

font-family: var(--font--display);
font-size: var(--font-size--80);
line-height: var(--line-height--small);
letter-spacing: var(--letter-space--condensed);

Text Weight

Weight classes when typography weight doesn't match the default HTML tag.

text-weight-300

Lorem ipsum dolor sit amet

text-weight-400

Other HTML tag defaults

Block Quote

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

font-size: 1.2rem;
line-height: 1.5;

padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;

Links

Link

color: inherit;
(from CSS embed)
‍
Note: Avoid setting a font-size to links. Instead, add a link block and then add a text block to it.

Unordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

display: flex;
flex-direction: column;
row-gap: 0.5rem;

Ordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

display: flex;
flex-direction: column;
row-gap: 0.5rem;

Alignment

Use to align text in layouts, or individual text elements.

text-left

Lorem ipsum dolor sit amet.

text-center

Lorem ipsum dolor sit amet.

text-right

Lorem ipsum dolor sit amet.

text-justify

Lorem ipsum dolor sit amet.

Rich text

Rich text and stuff

text-markdown

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph: 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

Lists:

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

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

Blockquote: 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

Link inside the rich text element

In the global CSS we are removing the top margin from the first element and the bottom margin from the last element

Color

This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.

Pallete

Although not all colors may be used, most are here just in case. If you need more colors, you can find the full spectrum in the Figma files.

Neutral

Highlight use case

Used as the main background color.

Used as the secondary background color, like the sidenav on this page.

Base text color of the project.

Slightly softer text color.

Base border color of UI elements of the project.

Border color of cards, if needed.