Web Style Guide

Colors

Hex Values

$orange-dk
#e94d13
$orange
#f26122
$orange-lt
#f6822c
$orange-dull
#fe824d
$blue
#687d90
$blue-lt
#82a0bb
$white
#fff
$gray-lt
#ededed
$gray-lt-2
#e0e0e0
$gray
#b9b4b7
$gray-dk
#444
$off-black
#222
$black
#000
$green
#34b754
$red
#de4444

Classes

default Paragraph Text

.orange-dk Paragraph Text

.orange Paragraph Text

.orange-lt Paragraph Text

.orange-dull Paragraph Text

.blue Paragraph Text

.blue-lt Paragraph Text

.white Paragraph Text

.gray-lt Paragraph Text

.gray-lt-2 Paragraph Text

.gray Paragraph Text

.gray-dk Paragraph Text

.off-black Paragraph Text

.black Paragraph Text

.green Paragraph Text

.red Paragraph Text

Background Textures

.bg--gray
.bg--orange

Font Styles

Achieve these styles by using: h1, .h1, or span.h1

H1 Heading Styles.

H2 Heading Styles.

H3 Heading Styles.

H4 Heading Styles.

H5 Heading Styles.
H6 Heading Styles.

Body Styles


p

This is the default size and styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.


p.big

This text is larger paragraph text, good for the introductory paragraph of longer content.


p.small

This text is small paragraph text.


p.smaller

This text is an even smaller paragraph text.


p.heading

To change the font from Overpass to Chakra, use the class .heading


p a

This text is a hyperlink using the a element.


mark

This text is highlighted using the mark element.


blockquote
"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Blockquote Footer, Author

Lists

  • This is an Unordered List.

  • This is an Unordered List.
    • This is a nested Unordered List.
    • This is a nested Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  1. This is an Ordered & Unordered List.

  2. This is an Unordered List.
    • This is a nested Ordered List.
    • This is a nested Ordered List.
  3. This is an Ordered List.
  4. This is an Ordered List.
  5. This is an Ordered List.
  1. This is an Ordered List.

  2. This is an Ordered List.
    1. This is a nested Ordered List.
    2. This is a nested Ordered List.
  3. This is an Ordered List.
  4. This is an Ordered List.
  5. This is an Ordered List.

Logos

Form Elements


Buttons & Styled Links

Showing the various ways buttons can be created with HTML and CSS classes through the content editor

p a.button

Click Me Button

p a.button.blue

Click Me Button

p a.button.outline

Click Me Button

p a.button.white-orange

Click Me Button

p a.button.white-blue

Click Me Button

p a span.button

Click Me Button

p a span.button.blue

Click Me Button

p a span.button.outline

Click Me Button

p a span.button.white-orange

Click Me Button

p a span.button.white-blue

Click Me Button

p span.button a

Click Me Button

p span.button.blue a

Click Me Button

p span.button.outline a

Click Me Button

p span.button.white-orange a

Click Me Button

p span.button.white-blue a

Click Me Button

a.button--link I am a Button Link button.button

input[type="submit"]

Content Blocks

Two Column Layout

Text & Photo (on Right)

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.

button

Text & Photo (on Left)

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.

button

Two Text Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.

button

Two Text Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.

button

Multi Columns

Centered Multi Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Centered Multi Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Centered Multi Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Centered Multi Columns

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Left Align Multi Columns + Icon

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Left Align Multi Columns + Icon

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Left Align Multi Columns + Icon

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Left Align Multi Columns + Icon

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Single Testimonial

"Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus."

Jane Doe, ABC Motor Sales

Multiple Testimonials

In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie.

Jane Doe, ABC Motors

In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.

John Doe, XYZ Motors

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie.

Joe Doe, JKL Motors

Logo Grid

Key Features / Use Cases

Key Feature Title 01

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor.

Key Feature Title 02

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque.

Key Feature Title with Bullets

  • Quisque eget odio ac lectus vestibulum faucibus eget in metus.

  • Curabitur vulputate, ligula lacinia scelerisque.

  • Nulla at nulla justo, eget luctus tortor.

Employees

Headshot Placeholder
Spaceship

Mrs. Wobbly Bird

Chief Wobbler

Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble.

Drives a 1980 UFO

Headshot Placeholder
Spaceship

Mr. Wobbly Bird

Founder of Wobbling

Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble.

Drives a Preowned 1985 UFO

Product Comparison