Updated 3/7/2014

Page Title

<h1>Page Title</h1>

SEO Page Title

<h1 class="sub">SEO Page Title</h1>

<span class="seo-header">Mock Heading 1</span>

Subheadings

<h2>Subheadings</h2>

Sub Subheadings

<h3>Sub Subheadings</h3>

Emphasized Subheadings

<h4>Emphasized Subheadings</h4>

The use of headings should be consistent. The h1 at the top of the content should be identical to the link title in the left nav. Subheadings in h2 should be used for categorizing content paragraphs and sections within the content. Any sub sections of a certain area should use h3. If a sub subsection needs some emphasis, the use of h4 is allowed. There shouldn't be any use of headings beyond h4.

Links & Buttons

Links inside body text should always use the standard link format of:

<a href="#">link text</a>

This is what a standard link looks like.

For a link that needs to draw more attention, we can use the "main_action" class as follows:

<a class="main_action" href="#">Button Text</a>

Will produce:

Button Text

List Styles

<ul> <li>Item 1</li> <li>Item 2</li> </ul> 

<ul class="unstyled"> <li>Item 1</li> <li>Item 2</li> </ul> 

<ul class="inline"> <li>Item 1</li> <li>Item 2</li> </ul> 

<ul class="tight"> <li>Item 1</li> <li>Item 2</li></ul> 

<ul class="icons"> <li>Item 1</li> <li>Item 2</li> </ul> 

<dl> <dt>Term 1</dt> <dd>Description 1.</dd> <dt>Term 2</dt> <dd>Description 2.</dd> </dl> 

Paragraph & Blockquote Styles

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

This is a normal blockquote with no other tags. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<blockquote>This is a normal blockquote with no other tags. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blockquote> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

This is a blockquote with the text wrapped in a <p>. Best used when you're actually quoting someone so that it will add the styled quotation marks before and after automatically.

<blockquote> <p>This is a blockquote with the text wrapped in a <p>. Best used when you're actually quoting someone so that it will add the styled quotation marks before and after automatically.</p> </blockquote> 

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna.

Photo Styles

Default Photo

The image above has no class or styling.

Inline Photo

<img alt="" class="photo-inline" src="/kitten.jpg" />

The image above is an inline photo that will style the photo with a white border and give it a faint box-shadow.

Inline Photo Aligned Left

<img alt="" class="photo-inline left" src="/kitten.jpg" />

The image to the left is an inline photo with left alignment that will allow text to wrap to the right. Be careful using this with too little text. This won't work well with just a sentence or two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

Inline Photo Aligned Right

<img alt="" class="photo-inline right" src="/kitten.jpg" /> 

The image above is an inline photo with right alignment that will allow text to wrap to the left. Be careful to use this when you have a lot of text. This won't work well with just a sentence or two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Table Styles

Default Table

Unstyled Table

<table class="unstyled"> 

Tight Table

<table class="tight"> 

Unstyled Tight Table

<table class="unstyled tight"> 

Toggles

Uses

Typically we use toggles to initially hide content that is relevant to the page, but may be overwhelming to a user scanning for the content he wants. A long page with large blocks of text separated into several h2 or h3 sections can be a good candidate for the toggle. Navigational items are also good uses such as our left nav accordions.

Standard Block Toggle

<a> <span class="togglebutton toggle_show"> This text will be clickable to show/hide the hidden content. </span> </a> <div class="toggle"> <p>This is the content that will be initially hidden and then shown when the above span is clicked.</p> </div>