Web Style Guide

Headings on top of one another

Please don't stack two of the same kind of heading on top of each other; also don't skip heading levels such as using an H2 and then an H5. Headings should descend to indicate content structure like this:

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Never use a heading to style body text. Visually impaired users rely on the structural meaning of headings to navigate areas of a webpage. Using headings at random just for style makes this difficult. Choose from custom styles in the CMS instead.

Headings on top of paragraphs <p>

Below is how the various headings look on top of paragraphs.

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; }