Web Style Guide

The sample content below includes basic HTML elements. Use this as a visual reference for structure and style as all of these styles are default and already worked into the CSS (style) of the website.


Common Page Elements

Paragraphs & Blockquotes

This is standard paragraph text. And this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan lobortis ultrices. Nullam ultricies sollicitudin purus.

This is called a "blockquote". Use it sparingly for quotations and pull-quotes that you need to emphasize visually on the site.

This is small paragraph text which can be used for fine print, footnotes, descriptions and more. Use sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lists

Unordered Lists

Use for lists of information where items' order is not dependent on other items. Standard list style.

  • List Item 1
  • List Item 2
  • List Item 3

Ordered Lists

Use for lists of information that have a specific order or chronology. Useful for steps, ranks, etc.

  1. First Item
  2. Second Item
  3. Third Item

Lists without Bullets

Use for lists of information where bullets and added padding on left is unnecessary. A page of only lists may need "no bullets" for easier scanning.

  • List Item 1
  • List Item 2
  • List Item 3
<h2>Common Page Elements</h2>

<h3>Paragraphs & Blockquotes</h3>

<p>This is standard paragraph text. And this is a <a href="#">link</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan lobortis ultrices. Nullam ultricies sollicitudin purus.</p>

<blockquote>This is called a "blockquote". Use it sparingly for quotations and pull-quotes that you need to emphasize visually on the site.</blockquote>

<p class="small">This is small paragraph text which can be used for fine print, footnotes, descriptions and more. Use sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<hr/>

<h3>Lists</h3>

<h4>Unordered Lists</h4>

<p>Use for lists of information where items' order is not dependent on other items. Standard list style.</p>

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

<h4>Ordered Lists</h4>

<p>Use for lists of information that have a specific order or chronology. Useful for steps, ranks, etc.</p>

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

<h4>Lists without Bullets</h4>

<p>Use for lists of information where bullets and added padding on left is unnecessary. A page of only lists may need "no bullets" for easier scanning.</p>

<ul class="nobullets">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>