Heading
<gcds-heading>

Also called: title, section heading, subheading.

A heading is a title that establishes levels of hierarchy to organize page content into a structure.

• GitHub
• Figma

Problems headings solves

Headings help structure content into a hierarchy for a visitor.

Use headings to:

• Aid both sighted and non-sighted people to navigate page content with a clear and organized hierarchy.
• Allow assistive technologies to scan heading levels that signal or summarize the content they contain. A person can then choose what they want to read without reviewing the entire page.
• Introduce a page or emphasize key sections or topics, making it easier for a person to scan and locate relevant information.
• Divide lengthy content into manageable sections. Breaking up your content supports readability, simplifies site navigation, and reduces the risk of people abandoning their task.
• Apply consistent typography styles and sizes throughout a website to create a cohesive and user-friendly design.

Related components

Text for paragraphs displaying non-heading content with matching GC Design System styles.

Screenreader-only for information that's detectable with assistive technologies like screen readers, but invisible to sighted users.