Headings
Headings define a document’s structure. Proper headings help readers quickly scan text for relevant information. They also help to create a hierarchy of information, as each heading tag carries a certain visual weight. Heading 1 defines the most important heading. Heading 6 defines the least important heading. In addition, each heading can be read as a child of the heading before it.
Search engines use headings to index the structure and content of web pages. Using headings is also essential to meet web accessibility guidelines. Screen-readers discover document structure by creating lists of all the headings of each page of the website.
The headings used throughout the site are displayed and defined below.
Heading 1 (H1)
Heading 1 tags are used for page titles only.
Heading 2 (H2)
Heading 2 tags are used commonly throughout the site to provide a title to main content on a page, or to clearly divide a page into two or more topics.
Heading 3 (H3)
Heading 3 tags should come after Heading 2 tags on a page and are used to further define information.
Heading 4 (H4)
H4 tags should come after Heading 3 tags on the page.
Text
The copy is formatted in the main style sheet and should only require bold and italic as needed. It is important to avoid underlining, as it makes text appear as links.
Bulleted Lists
When possible use bulleted lists to present web copy so that it is quickly and easily scannable by audiences. Bulleted lists are styled in the main style sheet, and do not require additional styling.
- Example 1
- Example 2
- Example 3
Link List
Whenever a list of links is created on a page, use the link-list style on a bulleted list.
- Create an unordered list
- In each list item, link the text to the appropriate location
- With the cursor anywhere on the list, click on the Apply CSS drop-down on the editor toolbar
- Select the UL: Link List style
Quotes
To apply the quote style:
- Type your text
- Highlight the text in the editor
- Click on the Apply CSS drop-down on the editor toolbar
- Select Quote
This is a quote example.
Introductory Text
Most pages of the website should include a page intro. They should always appear first on the page and can only appear once on a page. Intro should be no more than two sentences. The larger font size allows key content to be quickly scanned.
To apply the introductory text style:
- Type your text
- Highlight the text in the editor
- Click on the Apply CSS drop-down on the editor toolbar
- Select the Intro style
This is an example of introductory text. It’s typically used right after the page title at the top of the body content of a page.
Buttons
Buttons are prominent links that can be used throughout the site. On dark blue backgrounds, the blue button should be used. If two buttons appear side by side, use one blue and one red. The small buttons are for use on sidebar content or on pages that have several buttons throughout the page. Limit the amount of buttons in a row to two. Not every link needs to be a button. Link Lists are good for lists of text that have multiple links. Button text should be very short but descriptive. For instance, do not use Read More as button text as that does not meet accessibility guidelines.
To apply a button style:
- Type your text
- Highlight the text in the editor
- Link the text to the appropriate location
- Click on the Apply CSS drop-down on the editor toolbar
- Select a button (btn) style
btn-blue
btn-blue-small
btn-blue-arrow
btn-red-arrow
Images
In some cases, you may want to allow text to flow next to an image. This can be achieved with a CSS class set on the image itself.
To apply the style:
- Insert an image
- Highlight the image
- Click on the Apply CSS drop-down on the editor toolbar
- Select the Image: Float Left style to have the image float to the left or Image: Float Right to have the image float to the right
- Place the cursor on the side of the image and insert the content
- If content appears under the floating image and text, the Clear Float style must be applied to the element immediately following the text. This is applied by right-clicking the element and selecting the Clear Float style from the Apply CSS drop-down in the editor toolbar.
Image: Float Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum tristique dignissim. Morbi accumsan et ligula nec fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ullamcorper risus nec mauris commodo ultricies. Ut accumsan ornare fermentum. Etiam bibendum accumsan dui. Aliquam aliquam dolor eu ex pellentesque scelerisque. Cras eget dui nisl. Maecenas ipsum leo, tincidunt vitae sem facilisis, lobortis ultrices purus. Donec rutrum mauris eget efficitur aliquam. Integer consequat quam ac leo elementum congue. Suspendisse sed mauris odio. Sed sit amet sapien ante.
Image: Float Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum tristique dignissim. Morbi accumsan et ligula nec fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ullamcorper risus nec mauris commodo ultricies. Ut accumsan ornare fermentum. Etiam bibendum accumsan dui. Aliquam aliquam dolor eu ex pellentesque scelerisque. Cras eget dui nisl. Maecenas ipsum leo, tincidunt vitae sem facilisis, lobortis ultrices purus. Donec rutrum mauris eget efficitur aliquam. Integer consequat quam ac leo elementum congue. Suspendisse sed mauris odio. Sed sit amet sapien ante.