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
Structure
We defined a flexible core structure you can use on most pages.
Class explanations
.main
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.
.section
Function is to identify the separate sections of a page. Use a <section> tag to properly identify the sections.
.container-[size]
There are three defined container sizes - small, medium, and large.
Typography
We have a global system for headings, typography sizing, coloring, and customizations.
Heading tags
Always use the HTML tag to define default headings styles.
H1
H2
H3
H4
H5
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.
heading-xlarge
heading-large
heading-medium
heading-small
Text size
Use class prefix text- on a piece of text to change the size of the text.
paragraph tag - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales dictum nulla, non venenatis nunc. Mauris laoreet neque sed tempus fringilla. Aenean et tincidunt justo.
Text style
Style font-style css to change the text styling.
Text weight
Style font-weight css to make text more or less bold.
Text alignment
Style text-align css to make text, or other elements, align left, center, or right.
Text color
Text colors should be globally managed when possible. These global colors should be changed based on the colors in your project.
Rich Text
Webflow native rich text element. Our default name is c-rich-text.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
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.
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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Spacing
Spacing system that keeps vertical and horizontal spacing global on your website.
Margin direction
Global use of the direction of your margin. For example, margin-top.
Margin direction
Global use of the direction of your margin. For example, margin-top.
Margin size
Global use of the size of your margin. For example, large (48px).
Margin direction
Global use of the direction of your margin. For example, margin-top.
Padding direction
Global use of the direction of your padding. For example, padding-top.
Padding size
Global use of the size of your padding. For example, large (48px).
Useful globals
Globals we like to use in most of our projects to build faster.
Built for developers, yet accessible to non-technical people. Some of this section requires Webflow and CSS knowledge.
Responsive visibility
Show and hide elements by screensize
Max width full
Sets max-width to 'none'.
Icons classes
Sets a height or height and width on your icon. Great for social icons, company logos, footer assets, etc. Avoid using on elements that likely need unique customizations on tablet or mobile.
icon-small
icon-medium
icon-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Useful SVG icons
Find more icons here https://feathericons.com and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.
Useful classes as you're building
More advanced. Not required to use.
Colors
Use colors globally. Use global swatches.
We use classes to change the color and background-color CSS properties. These should be updated in your project based on the colors of your website. Text coloris shown in the Typography section.
background-color-grey
background-color-white
background-color-black
background-color-primary