Heading

import { ... } from '@ag.ds-next/react/heading';

Break content up with headings. Headings should clearly state what the user will find in content that follows.

The first heading (H1) should be unique to each page and contain keywords. Page headings should match users’ search intent and should be 20 to 70 characters in length. See How to create guidance in the Export Service for more information.

Heading uses the fontGrid function to make the font-size and line-height snap to grid.

Do

• use to introduce each page section
• use to break up lengthy content
• write concise, descriptive headings in active voice
• write headings using sentence case
• follow the correct H1-H6 hierarchy:
  • H1: is the most important heading. It describes the page title using a term people might search for. Example: Exporting from Australia
  • H2: is the second most important heading and should include related but different search terms to H1. Example: Guidance for new exporters
  • H3: use to break up long H2 sections
  • H4 – H6 are rarely used. Use H4 to describe H3 subsections. Example: Plants and plant products

Don’t

• skip heading levels – for example, don’t jump from H2 to H4
• include punctuation in headings
• create headings of more than one line
• alter the heading styling.

Levels

Our range of supported headings.

<Stack>
	<H1>Heading 1</H1>
	<H2>Heading 2</H2>
	<H3>Heading 3</H3>
	<H4>Heading 4</H4>
	<H5>Heading 5</H5>
	<H6>Heading 6</H6>
</Stack>

Semantic headings

If you wish to use a pair a different heading size with a different HTML element for semantic reason, you can use the Heading component and use the as property to change the HTML element that will be rendered.

<Stack>
	<Heading as="h3" fontSize="xxxl">
		Heading 3 (xxxl)
	</Heading>
	<Heading as="h3" fontSize="xxl">
		Heading 3 (xxl)
	</Heading>
	<Heading as="h3" fontSize="xl">
		Heading 3 (xl)
	</Heading>
	<Heading as="h3" fontSize="lg">
		Heading 3 (lg)
	</Heading>
	<Heading as="h3" fontSize="md">
		Heading 3 (md)
	</Heading>
	<Heading as="h3" fontSize="sm">
		Heading 3 (sm)
	</Heading>
	<Heading as="h3" fontSize="xs">
		Heading 3 (xs)
	</Heading>
</Stack>

Related components

• List – Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.
• Text – A primitive typographic component for constrained text styles.