Style Guide
This is a guide for styles and layout components used throughout this website. You can change the styles here and it will change/update across the rest of the site. When adding a new component to your website, give it the style name(classes) to the Selector to apply the style.
Typography
All text sizes.
2X Large
This is a Heading
X Large
This is a Heading
Large
This is a Heading
Medium
This is a Heading
Small
This is a Heading
X Small
This is a heading
Large 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Medium 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Small 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
X Large Text Display
Large Text Display
Medium Text Display
Small Text Display
Quote
This is a Block Quote
Colors
#bf9106
#8c5c03
#593b02
#402401
#261201
#ffffff
#7f7f7d
#000000
Buttons
Columns
This website is built with a 12 column system to create a more flexible layout. Please read more about the
Grids
Grid layouts to use in your site.
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Spacers
Spacer components to give elements more room. The number in the title defines width and height. Spacer 16 is 16px by 16px. Easily place these anywhere to create space inbetween elements.
Spacer 8
Spacer 16
Spacer 48
Spacer 64
Spacer 96
Spacer 128
Icons
Icons from iconfinder.com and flaticon.com
Tabs
Rich Text
Learn more about rich text HERE on Webflow
What’s a Rich Text element?
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.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Animations
Simple animations to use across your site.
Components
Different Footers to choose from.
Components make it easy to copy and paste a section that is on a lot of pages like a navigation bar or a footer. Components are found in the Webflow designer in the top left with an icon that looks like a 3D box. Open that up and you will find components that you can drag and drop into your webpages. Learn more about components on Webflow HERE