Style Guide

Interior Heading Test

This is a paragraph. Sphinx of black quartz, judge my vow. Vestibulum viverra iaculis nunc nec volutpat. Aenean sed turpis quis lorem aliquet vestibulum et nec purus. Nulla tortor sem, egestas a dolor at, tristique fermentum odio. Donec ut tempus dolor. Ut lorem arcu, vestibulum vitae sem non, posuere commodo nisi.

Headings

The HTML <h1><h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. For our purposes, only headings <h2><h6> are available for use within the content area. The <h1> is reserved for page titles only.

h2. This is a large heading.

h3. This is a medium heading.

h4. This is a moderate heading.

h5. This is a small heading.
h6. This is a tiny heading.

Heading Dividers

Heading dividers are only available on <h2> headings. The choices are Light Blue, Blue, Green, and Orange. In addition to these choices, heading text colors may also be chosen.

h2. This is a light blue divider.

h2. This is a blue divider.

h2. This is a green divider.

h2. This is an orange divider.

Color Options

Alignment Options

h3. This is a blue heading.

h3. This is a green heading.

h3. This is an orange heading.

h3. This is left aligned.

h3. This is center aligned.

h3. This is right aligned.

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. You also have available the .underline class to underline your text as well as the .uppercase class to MAKE YOUR TEXT UPPERCASE.

Links

The standard link colors are preset to the Primary color. This is an example of a link.

Unordered and Ordered Lists

Use an unordered list to list things if the order of the items doesn’t matter. Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst.

  • List item number 1
  • List item number 1
  • List item number 1
  1. List item number 1
  2. List item number 1
  3. List item number 1

Buttons

A basic button can be created using the .btn class. You have your choice of three button text colors, .btn--blue.btn--green and .btn--orange. If you’d like your button to stand out a little more, you may also add the class .btn--outline.

Standard Button With Blue Text
Standard Button With Green Text
Standard Button With Orange Text
Outline Button With Blue Text
Outline Button With Green Text
Outline Button With Orange Text