Classes

Empower a non-technical person to manage your website.
Empower a non-technical person to manage your website.
Give the reader as much context into the purpose of that class.
Read a class name and know what its purpose is.
No abbreviations, no shorthand, no confusion.

Global class systems

There are three primary global class systems that come with Client-first. We have identified these as our most important global-use classes when building in Webflow.

Structure
Typography
Spacing

Structure

We defined a flexible core structure you can use on most pages.

Class explanations

.main

No styles required. Styles are optional.

Primary purpose is accessibility. The main content of the page. Use a <main> tag that wraps all or most of your website content sections. The nav and footer should not be inside this <main> tag.

Learn more

.section

No styles required. Styles are optional.

Function is to identify the separate sections of a page. Use a <section> tag to properly identify the sections.

Learn more

.container-[size]

margin-left: auto

margin-right: auto

width: 100%

max-width: [small/medium/large]

There are three defined container sizes - small, medium, and large.

Learn more

Typography

We have a global system for headings, typography sizing, coloring, and customizations.

Learn more

Heading tags

Always use the HTML tag to define default headings styles.

font-size: 50px

H1

font-size: 38px

H2

font-size: 28px

H3

font-size: 20px

H4

font-size: 17px

H5

font-size: 15px

H6

Heading text

Use class prefix heading- on H1, H2, H3, or any other piece of text to change the text to a specific H heading size. Notice how H1 = heading-xlarge, H2 = heading-large, etc.

font-size: 4rem

.heading-xlarge

font-size: 3rem

.heading-large

font-size: 2rem

.heading-medium

font-size: 1.25rem

.heading-small

Text style

Style font-style css to change the text styling.

text-decoration: underline

.text-style-link

font-style: italic

.text-style-italic

text-transform: uppercase

.text-style-allcaps

opacity: 0.5

.text-style-muted

Apply "..." after 2 lines of text

-webkit-line-clamp: 2;

.text-style-2lines

Apply "..." after 3 lines of text

-webkit-line-clamp: 3;

.text-style-3lines

Apply "..." after 4 lines of text

-webkit-line-clamp: 4;

.text-style-4lines

Text weight

Style font-weight css to make text more or less bold.

font-weight: 700

.text-weight-xbold

font-weight: 600

.text-weight-bold

font-weight: 500

.text-weight-medium

font-weight: 400

.text-weight-medium

Text alignment

Style text-align css to make text, or other elements, align left, center, or right.

text-align: left

.text-align-left

text-align: center

.text-align-center

text-align: right

.text-align-right

Text color

Text colors should be globally managed when possible. These global colors should be changed based on the colors in your project.

text-color: #ffffff

.text-color-white

text-color: #000000

.text-color-black

text-color: #4fadff

.text-color-blue

text-color: #666666

.text-color-grey

Rich Text

Webflow native rich text element. Our default name is .c-rich-text.

Heading 1

Heading 2

Heading 3

Heading 4

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Stuff
Stuff

Events Rich Text

Webflow native rich text element. Our default name is .c-event-content__description.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs and caption

Neue Haas Grotesk is the standard typeface for Fellowship Church on the web for large texts, headings and paragraphs.

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.

Paragraph XXL - 32PX / 1.25

Paragraph XL - 24PX / 1.5

Paragraph LG - 19PX/1.6

Paragraph - 17PX/1.7

Paragraph SM - 15PX/1.6