Style Guide

This is the Style Guide for this Website. Here you have access to all the different Styles used for Typography, Color, Forms & more. To edit a style, select the Element on this Page. If you're editing an Element that does not have a Class applied to it, make sure to select the HTML Tag of the Element in the Style Selector and edit the Tag instead. All changes made here will be applied to every element with the Class or Tag applied to it across the entire Website, so proceed with Caution.

Colors

These are all the Colors that are, or can, be used across the Website. In this Project, the Tailwind CSS Color System is used, meaning that each Color comes with 11 Shades. These Shades go from 50 (lightest) to 950 (darkest). This gives you all the flexibility you need to make your Website cohesive & visually pleasing.
If you would like to change the Colors in this Template to fit your Brand, we highly recommend that you generate a fitting Color Palette that uses the Tailwind CSS System. This can easily be done here: https://uicolors.app/create

Neutral Colors

50
100
200
300
400
500
600
700
800
900
950

Primary Colors

50
100
200
300
400
500
600
700
800
900
950

Success Colors

50
100
200
300
400
500
600
700
800
900
950

Danger Colors

50
100
200
300
400
500
600
700
800
900
950

Typography

Here is a List of all the Text Styles used in this Template. All Elements that have an HTML Tag will have the Tag styled, not a Class. The Fonts are sourced from Google Fonts, the link can be found here.
The Font is set in the Body Tag, to change it across the Website make sure to change the Font in the Body Tag.

This is an H1 Heading.

"All H1 Headings" Tag

This is an H2 Heading.

"All H2 Headings" Tag

This is an H3 Heading.

"All H3 Headings" Tag

This is an H4 Heading.

"All H4 Headings" Tag
This is an H5 Heading.
"All H5 Headings" Tag
This is an H6 Heading.
"All H6 Headings" Tag

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.

"All Paragraphs" Tag - Paragraph Normal

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 - 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 - Small
Click here
"All Links" Tag
  • This is a List Item
  • This is a List Item
  • This is a List Item
  1. This is a List Item
  2. This is a List Item
  3. This is a List Item
"All Unordered Lists" Tag + "All Ordered Lists" Tag
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.
"All Block Quotes" Tag

Rich Text

Here you can find & edit the Rich Text Elements across the Website. Simply select the Element you want to style and select the HTML Tag in the Style Selector. By default, a majority of the Typography Elements in this Template are styled using their respective HTML Tag.

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!

We use Tags to style all these Element

  • This is a List Item
  • This is a List Item
  • This is a List Item

We also have styled Quotes

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.
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.

Use Links to refer to other Pages or Sites

Click here

This an Image Caption

Buttons

Here you can find all the Buttons that are, or can, be used in this Template. To make changes, make sure to edit the Main Button Class to make changes that are applied to all Buttons, and then dive deeper by editing the respective Combo Classes.

Buttons (Primary)

Button - Large
Button Text

Buttons (White)

Button - White - Large
Button Text
Button - White
Button Text

Forms

Here you can make global Changes to all Forms used on this Template. Simply select the Element you want to edit and change the corresponding Tag or Class, it's that easy.

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