Web Style Guide

Headings on top of one another

Be sure not to stack two of the same kind of heading on top of each other; also do not skip heading levels such as using an H2 and then an H5. Headings should descend like this:

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Never use a heading style to format body text. Visually impaired users on the web use headings to navigate around sections of a webpage, and using a heading to format body text makes this difficult. Choose from the custom formats available in the CMS instead.

Headings on top of paragraphs <p>

Text included here, because as pointed out above you should never stack two of the same heading levels directly on top of one another.

Heading 2

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. 

Heading 3

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.

Heading 4

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.

Heading 5

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.

Heading 6

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.

Inline Elements & Custom Formats

Use inline elements and custom formats in the CMS to format body text.

• <strong> bold
• <em> italic
• <a> anchor & anchor with href
• maroon-text
• large
• large-white (text will appear white)
• x-large
• small
• <s> strikethrough
• <sup> supercript¹
• <sub> subscript₂

Lists

Unordered List

• Item one
• Item two. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
• Item three

Ordered List

1. First item 
2. Second item. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
3. Third item 

Nested Unordered List

• Item one
• Item two
  • Item 2.1
  • Item 2.2. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
  • Item 2.3
• Item three

Nested Ordered List

1. First item
2. Second item
   1. Item 2.1
   2. Item 2.2 This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
   3. Item 2.3
3. Third item

Unstyled List

This is a Bootstrap style. Add the class "list-unstyled" to the <ul>.

• Item one
• Item two. This item is longer than the others to test how it will look when it wraps. Is there enough line-height between lines and enough space between each list item?
• Item three

Blockquotes

"There's a pretty fellow, now," he banteringly laughed, standing in the ship's bows, "there's a jackal for ye! I well know that these Crappoes of Frenchmen are but poor devils in the fishery; sometimes lowering their boats for breakers, mistaking them for Sperm Whale spouts; yes, and sometimes sailing from their port with their hold full of boxes of tallow candles, and cases of snuffers, foreseeing that all the oil they will get won't be enough to dip the Captain's wick into;"

Pre <pre>

#main-content p, ul, ol {
 font-size: 1.8rem;
 line-height: 1.8em;
 word-spacing: 0.1em;
}

Code <code>

#main-content p, ul, ol { font-size: 1.8rem; line-height: 1.8em; word-spacing: 0.1em; }