Heading
Variants
Heading standard
This is an h1
This is an h2
This is an h3
This is an h4
This is an h5
This is an h6
<h1 class="gi-heading-xl">This is an h1</p> <h2 class="gi-heading-lg">This is an h2</p> <h3 class="gi-heading-md">This is an h3</p> <h4 class="gi-heading-sm">This is an h4</p> <h5 class="gi-heading-xs">This is an h5</p> <h6 class="gi-heading-2xs">This is an h6</p>
{{ govieHeading({ "as": "h1", "text": "This is an h1" }) }} {{ govieHeading({ "as": "h2", "text": "This is an h2" }) }} {{ govieHeading({ "as": "h3", "text": "This is an h3" }) }} {{ govieHeading({ "as": "h4", "text": "This is an h4" }) }} {{ govieHeading({ "as": "h5", "text": "This is an h5" }) }} {{ govieHeading({ "as": "h6", "text": "This is an h6" }) }}
import { Paragraph } from '@govie-ds/react'; <Heading as='h1'>This is an h1</Heading> <Heading as='h2'>This is an h2</Heading> <Heading as='h3'>This is an h3</Heading> <Heading as='h4'>This is an h4</Heading> <Heading as='h5'>This is an h5</Heading> <Heading as='h6'>This is an h6</Heading>
Heading with a caption
This is a captionThis is a heading
<span className="gi-text-gray-500">This is a caption</span> <h1 class="gi-heading-xl">This is a heading</p>
{{ govieHeading({ "content": "This is a heading", "caption": "This is a caption" }) }}
import { Paragraph } from '@govie-ds/react'; <Heading as='h1' caption="This is a caption">This is a heading</Heading>
Usage
Use heading as, such as <h1>
, <h2>
and so on, to tag the headings on a page. Style headings consistently to create a clear content structure throughout your service.
For a question page, or pages with long headings, follow the usual hierarchy of heading levels and styles associated with them. For example, <h1>
, followed by an <h2>
and so on. In rare cases, you might want to alter how you use the headings hierarchy to achieve a better visual balance. An example of this is in the design system’s notification banner which uses heading levels in a different order to emphasise the most important information. If you do change the heading hierarchy in a similar way, it needs to go through accessibility testing before use.
Write all headings in sentence case.
Best Practices
When to use this component
When not to use this component
Status
Figma Library | Considering |
Local HTML | Stable |
Global HTML | Beta |
Global React | Beta |