Style Guide

This style guide page contains styles and components that are used throughout a website.

Typography

Here are the different Text Styles & Sizes used throughout the Template.

Heading H1

This is an H1 Heading.

Heading H2

This is an H1 Heading.

Heading H3

This is an H1 Heading.

Heading H4

This is an H1 Heading.

Heading H5
This is an H1 Heading.
Heading H6
This is an H1 Heading.
Paragraph Large

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

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 Small

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.

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
List
  • Lorem ipsum dolor sit ame
  • Lorem ipsum dolor sit ame
  • Lorem ipsum dolor sit ame

Rich Text

Rich Text that's used for long form text like Blog Posts.

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.

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.

How to customize formatting for each rich text
  • List that used in text
  • rich text with list element
How to customize formatting for each rich text
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.

Text Link

Figure with Caption

Text Boxes

These are the Text Boxes that are used throughout this Template. Each box has a max width. Place the Text inside of a Div with the Text Box class applied to limit it's width to the set ammiunt.

Text Box 400
Text Box 500
Text Box 600
Text Box 700
Text Box 800

Colors

These are the Colors used throughout the Template.

Grids

These are the Grids used to create the different Layouts.

2 Col Grid
3 Col Grid
4 Col Grid
1-2 Grid
1.5-2 Grid
2-1 Grid

Buttons

Here are all the Buttons that are used throughout the Website.

Button Secondary
Button Text
Button Outline
Button Text
Button Minimal
Button Text
Button Disabled
Button Text

Forms

Here are the different Form Elements that can be used throughout this Template.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.