Heading levels follow a sequential, hierarchical order: higher levels have larger display text than lower ones.
Set correct and consistent heading levels to align the coded and visual headings on a page. Consistent headings support an equitable experience for people who use assistive technologies.
Order headings sequentially from lowest to highest (H1–H6).
Avoid skipping heading levels. Instead, restructure content so headings are used sequentially, from largest (H1) to smallest (H6).
Only use an H1 heading once on a page. Other heading types can be used multiple times.
Use H2 headings to describe individual sections. Each section should have one H2 heading.
Opt to use H3–H6 headings within sections. Sections can contain multiple H3–H6 headings, as long as they are placed in hierarchical order.
Maintain accessible character limits
Maintain the default character-limit for each heading line by keeping the attribute set to true for a comfortable and accessible reading length. These defaults create a balanced, consistent line length across heading font sizes.
Keep character limits to the following lengths to maintain a visual balance across headings on a page:
31 characters for H1.
35 characters for H2.
40 characters for H3.
45 characters for H4.
50 characters for H5.
57 characters for H6.
Use consistent spacing
Maintain default spacing for a comfortable and accessible reading experience. These defaults create visual breaks and separation between different sections.
Keep spacing values to the following to maintain a visual balance across headings on a page:
Default margin-bottom: 300 for all
Default margin-top: 0 for H1 and 600 for H2–6
Examples
Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.
These attributes are needed for the component to function correctly.
tag
The tag attribute sets the appropriate HTML heading element for the selected level.
<gcds-heading tag="h2">Heading</gcds-heading>
Optional attributes
These attributes allow you to customize or extend the component’s behaviour and presentation.
character-limit
The character-limit attribute defines the line length to a maximum number of characters per line for each heading level, ensuring a comfortable, accessible reading length.
The default slot allows you to inject custom content into the component’s primary content area, and named slots, into specific areas.
default
The default slot is for adding text to the heading.
<gcds-heading tag="h2">Heading</gcds-heading>
Code builder Generate an instance of the component you need by selecting its code properties.
Explore by choosing different code values to generate the instance you want.
Get the code and pull it into your environment.
Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice. Heading Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub 2026-09-14