dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Headings

v2.0.8

Headings help to structure content on a page using relative visual prominence.

Released

History
View changes
Install
npm i @gov.au/headings
Tags
Requires
Contributors
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture

Default

Our range of supported headings. These use the AU-fontgrid function to make the font size and lineheight snap to grid.

Example

<h4 class="au-display-xxxl">Display xxxl</h4>
<h6 class="au-display-xxl">Display xxl</h6>
<h4 class="au-display-xl">Display xl</h4>
<h5 class="au-display-lg">Display lg</h5>
<h2 class="au-display-md">Display md</h2>
<h3 class="au-display-sm">Display sm</h3>
<h1 class="au-display-xs">Display xs</h1>
import AUheading from '@gov.au/headings';

<AUheading size="xxxl" level="4">Display xxxl</AUheading>
<AUheading size="xxl"  level="6">Display xxl</AUheading>
<AUheading size="xl"   level="4">Display xl</AUheading>
<AUheading size="lg"   level="5">Display lg</AUheading>
<AUheading size="md"   level="2">Display md</AUheading>
<AUheading size="sm"   level="3">Display sm</AUheading>
<AUheading size="xs"   level="1">Display xs</AUheading>