Headings

Used as titles to create hierarchical information structure within a page layout

Display Responsive

Use for responsive display heading.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Display Static

Use for non-responsive display heading that maintains font size across all viewport sizes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Large

Use for a responsive large heading.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Large Static

Use for non-responsive large heading that maintains font size across all viewport sizes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Medium

Use for a responsive medium heading.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Medium Static

Use for non-responsive medium heading that maintains font size across all viewport sizes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Small

Use for a responsive small heading.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Heading Small Static

Use for non-responsive small heading that maintains font size across all viewport sizes.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Subheading

Use for subheadings that are positioned beneath small headings.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Use h1-h6 to identify headings (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>)
  • Headings are used to label page regions
    • Use the aria-label attribute to associate headings with their page region, as described in the label page regions section of this tutorial
  • Subheadings are not semantic headings. Subheadings may be visually styled as a heading but will not be navigable using a screen reader
  • For PDF documents, follow the technique on this page: Providing headings by marking content with heading tags in PDF documents
  • Assistive technologies skim the structure of a page:
    • Allow users to navigate to or skip over sections through the use of heading levels
    • Avoid skipping heading levels (e.g., <h2> to <h4> )

This component has compliance with WCAG guidelines by:

  • Defining semantic heading levels with ability to assign predefined visual heading styles to each level