Typography

We have 2 types of Headlines. We have Raleway and Rokkitt. The style guide will assume you want the standard "Rokkitt" font for your headline unless otherwise specified

Standard Headlines with No Styles

Header H1 (64px)

Header H2 (52px)

Header H3 (36px)

Header H4 (28px)

Header H5 (24px)
Header H6 (18px)

Headlines for Standard Internal pages - Require class "single-page-title"

Header H1

Header H2

Font-Families

The font options we have are Rokkitt, Raleway, Verdana, Georgia - to over-ride this in HTML use the class .rokkitt or .raleway, etc.

Rokkitt Raleway Verdana Georgia

Font-Size Overrides

You can force a font-size - while not recommended in a quick layout this will work.

font-size-64 font-size-52 font-size-36 font-size-30 font-size-28 font-size-22 font-size-21 font-size-20 font-size-18 font-size-14 font-size-12

Note: You can turn a headline purple, blue, or orange by adding the respective class like...

<h1 class="purple">Headline 1 Purple</h1> <h2 class="blue">Headline 2 Blue</h2>

Paragraphs

Standard Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Summary Paragraph (p.summary)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

List Items

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
    4. Nested List Item
    5. Nested List Item
  4. Ordered List Item
  5. Ordered List Item
  6. Ordered List Item
  • Unordered List Item
  • Unordered List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item

Extra Items

This is the <blockquote> Element. It has special styles associated with it.
This is bolded or strong font. It's heavy This is italic font. This is italic and bold

I'm a paragraph and I contain a link.

A HR Tag

Table

I am a Table Header I am a Table Data Cell
I am a Table Header I am a Table Data Cell
I am a Table Header I am a Table Data Cell
I am a Table Header I am a Table Data Cell
I am a Table Header I am a Table Data Cell