Header Best Practices

  • Only use one H1 tag on a page, any other header style can be used multiple times
  • Make sure your headers are properly nested. Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
  • Use heading modifiers when you would like a Header to look larger or smaller than its level. See the CSI Heading Modifiers section below.

Header Styles

To apply basic headings or heading modifiers, highlight the text you would like to style and select a style from the Formats dropdown inside of the text editor. 

Featured Heading 1

Used in combination with H1 Headers to display a subtitle/marketing text inside of the page header.  

Featured Heading 2

Used to emphasize content within the body of the page. 

Featured Heading 3

Used to emphasize content within the body of the page. 

Header 1 (H1)

Used only for page titles with or without a subtitle as a single H1 tag.

Header 2 (H2)

Used for main page sections in the body of the page.

Header 3 (H3)

Used for paragraph headers and titles

Header 4 (H4)

Used for paragraph headers and titles

Header 5 (H5)

Used for paragraph headers and titles

Header 6 (H6)

Used for paragraph headers and titles

Inline Styles

Inline styles provide different ways of highlighting or emphasizing small portions of pod content. Primarily for 'Regular' pods, they include:

  • Bold (Strong)
  • Italic (Emphasis)
  • Strikethrough
  • XSuperscript
  • XSubscript
  • Underline – there are very few times when you should use Underline on a website; it is too closely associated with links
  • Code
  • Small - you can use this inside of a header tag to create special subheaders.

Paragraph

General paragraph styles used for most body copy:

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

 

Lead Paragraph

Slightly larger paragraph style, use this as an extra long subtitle, or an "intro" paragraph:

Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

 

Address

Used for addresses and phone number/email blocks:

123 Leonard Street NE
Grand Rapids, MI 49503

 

Blockquote

Displays a basic quote:

"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."

 

Div

For use around non-text elements that don't belong inside of a paragraph, such as images.

 

Pre

Short for "preformatted". Used to display code snippets:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.

Using button styles to format links

First create a link by highlighting text and clicking the Add Asset icon to create either an external link (globe) or an internal link(chain). Your linked text will look like this:

[INLINK]Button Text[/INLINK]

Next, highlight the entire linked text, including the [INLINK] tags, and select a Button style from the Formats dropdown. 

Use button styles instead of inline links in a paragraph. They are more noticeable to a user and are essential to creating an effective call to action.

CSI Button Styles

Testimonial Center

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Testimonial Left

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Testimonial Right

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Testimonial Author

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Author Name Sample

Testimonial Details

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Author Name Sample

Testimonial Details

Quote Small

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Quote Large

"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Primary Color

TBD

Secondary Color

TBD

Heading Modifiers are available for when you want to match the font styling of a heading but cannot use the associated Header element. This allows you to be flexible with your styling while maintaining proper nesting of headings for accessibility purposes. 

With a Heading Modifier, you could have a H5 Heading in the middle of a page that is visually styled the same as a H2 Heading. 

To learn more about proper nesting, read the W3C documentation on page structure here: