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.
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
Heading component preview
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.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an