Headings provide users (visual and those using assistive technologies) with critical information about the content hierarchy on a webpage or web application. 

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Text and data


Configure: select the dropdowns below to display the variety of options that headings support.

This is an h1 heading



Responsive preview

Usage best practices

HTML provides us with six levels of headings represented by <h1> through to <h6>.  Each heading level has corresponding styles such as responsive font-sizes, margins and line heights. Typically, the headings are not constrained by line length unless they are inside the <article> tag where they take on the line length of a paragraph <p> tag.

Consider using headings to:

  • provide structure and hierarchy to the blocks of content
  • group subtopics under a larger grouping
  • break up different topics on a single page

Usage example:

  • heading for a recreation facility followed by next level heading for hours of operation, amenities, etc.
Heading variations and features
Variation name Variation availability Unique features

all levels <h1> to <h6>

  • different responsive font sizes
  • responsive line heights
  • margins
Subtitle block

second level heading only <h2>

  • heavier font lines
  • line below the text - two options:
    • black line
      • line length runs the full width of the container
    • red line:
      • two line length options (short, long)
      • two alignment options (left, right)


For the subtitle with red underline variation, choose a line length that matches closely with the amount of text in the title.


Do not skip any heading levels i.e. go from heading 2 straight to heading 4. This creates accessibility issues for users using assistive technologies such as screen readers to peruse the content.

Do not use heading 1 more than once on a page as this creates confusion for users using assistive technologies such as screen readers to peruse the content.