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

1 H2 Heading

H2 Black/900 36px/1rem

H2 Heading

1 H2 Heading

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

H3 Heading

1 H3 Heading

H3 Bold/700 32px/1.78rem

H4 Heading

1 H4 Heading

H4 Inter Bold/700 24px/1.3rem

H5 Heading
1 H5 Heading

H5 Bold/700 20px/1.1 rem

H6 Heading
1 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

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 must be ordered sequentially, with no skipped heading levels. For example, do not set a heading level to H2 and then set the next heading level on the page to H4.
  • The page title should be the only H1 on the page.
  • Heading text should be unique and descriptive of the content within that section.
  • Follow WCAG 2.1 guidelines for text spacing.

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.
  • If you check "Include numeric label" for the heading, include a whole number for the Number text field.
    • Number text must be whole numbers (1, 2, 3, etc.) - they cannot be letters or decimal values.
    • Number values must be applied manually, so ensure numbering is sequential and in logical order.

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.