Heading
Skip to main content
Careers Contact us

Heading

Component library

How to use this component

Use the Heading component to organize and structure webpage content. It should be selected for page titles, section headings, or subheadings to create clear content hierarchy.

The Heading component provides a structured way to introduce and label sections of a webpage, enhancing readability and navigation.

YouTube component

View video transcript for Heading component.

All headings

H1 Black/900 48px/2.67 rem

H2 Heading

H2 Black/900 36px/1rem

H2 Heading

H2 with border (border is 8px, primary blue 70)

H3 Heading

H3 Bold/700 32px/1.78rem

H4 Heading

H4 Inter Bold/700 24px/1.3rem

H5 Heading

H5 Bold/700 20px/1.1 rem

H6 Heading

H6 Bold/700 18px/1rem

Best practices

Follow these guidelines to use the Heading component effectively. These tips will help ensure your headings are both functional and accessible.

  • Use headings to organize content and provide structure for readers.
  • Ensure the page title is the only H1 on the page.
  • Nest headings and order them sequentially (e.g., H2 followed by H3).
  • Use sentence case for headings.
  • Don’t use headings to modify font size or visual style.
  • Avoid skipping heading levels (e.g., from H2 to H4).
  • Do not use more than one H1 on a single page.

Examples

Bad example:
  1. Use sentence case, instead of Title Case. 
  2. Follow proper hierarchy, headings should be ordered sequentially.
  3. Do not use all caps.
  4. This header should likely be an H2, since it's at the same level as types of fruit.

Good example: Follows proper hierarchy and best practice guidelines.

Accessibility

Maintain adequate font size for readability, especially on smaller screens and for visually impaired users.

Follow WCAG 2.1 guidelines for text sizing and spacing.

Headings should be used to organize content and provide structure for readers. Refer to W3C article on Headings and Labels for more detail.

  • Headings should not be applied to modify font size or visual style.
  • Headings can be nested and must be ordered sequentially (do not jump from H2 to H4).
  • The page title should be the only H1 on the page. 

Web Coordinator checklist

  • Apply proper hierarchy: Follow the sequential order (H1 to H6) without skipping levels.
  • Assign IDs: For anchor links, assign IDs to headings.
  • Limit H1 usage: Only one H1 should be used per page.
  • Style consistently: Use sentence case and maintain consistent margin bottoms for whitespace.
  • Check accessibility: Ensure font size and spacing comply with WCAG 2.1 guidelines.
  • Follow Web Writing Style Guide best practices.

When to Use

Use the Heading component to organize and structure webpage content. It should be selected for page titles, section headings, or subheadings to create a clear content hierarchy.