left col

Our Website Style Guide

This guide will list the styles we are using on this website so that we can maintain a standard look and feel throughout. All pages will start with a Heading 1 as required, followed by a Stand Out Block (seen here) with a brief description about the content found on that page.

right col

left col

right col

left col

Feature & Card

We use a feature style for landing pages with a color background, except for a few pages where we use background images. Use background images on features sparingly. Use the card style or gray background below for sections you want to pop or make more clear.

right col

left col

Feature

w/ BG Image

Feature

w/ BG Image

feature stock-photo-#

Link?

Feature w/ Background-1

feature-middle background-1

hover-button-1
aligned center
button-width-# as needed

Link

Feature w/ Background-2

feature-middle background-2

hover-button-1
aligned center
button-width-# as needed

Link

Generic Card

card

Use for a section you may want to have a list in, or general content that isn't technically a feature/navigation.

right col

left col

Backgrounds & Buttons

You can use a gray background in a section to highlight the content next to it. See the button sample below.

right col

left col

backgrounds

background-gray middle

For all buttons outside of the feature style, use:

button-1 button-width-# (as needed)

Link

right col

left col

Use this border top style on a row to help separate groups of text or sections of instruction.

border-2 border-thick border-top

right col

left col

right col

left col

right col