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.

Header

v4.1.6

Headers help users understand what the content of the page is about. They appear at the top of a page, above the main body text. They are usually styled as level (H1) headings.

Released

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

Default

The header at the top of the page. Usually contains a Commonwealth Coat of Arms, branding and navigation.

Example

<!--
  Light:  <header class="au-header" role="banner">
  Dark:   <header class="au-header au-header--dark" role="banner">
-->

<header class="au-grid au-header" role="banner">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <a class="au-header__brand" href="#">
          <img class="au-header__brand-image" alt="Insert alternate text here" src="http://placehold.it/256x80">
          <div class="au-header__text">
            <h1 class="au-header__heading">Site title</h1>
            <div class="au-header__subline">
              Service description that could be a little longer
            </div>
          </div>
        </a>
      </div>
      <!-- <div class="col-md-3">Extras</div> -->
    </div>
  </div>
</header>
/*
  Light:  <AUheader>
  Dark:   <AUheader dark>
*/

import AUheader, { AUheaderBrand } from '@gov.au/header';

<AUheader>
  <div className="container">
    <div className="row">
      <div className="col-md-9">
        <AUheaderBrand
          title="Page title" 
          subline="Service sub-title that could be a little longer"
          link="#"
          brandImage="http://placehold.it/256x80"
          brandImageAlt="Insert alternate text here"
        />
      </div>
    </div>
  </div>
</AUheader>

Hero

A ‘hero version of the header. This version has larger spacing for more visual prominence. Examples of use might be a home page, or promotional page.

Example

<!--
  Light:  <header class="au-header au-header--hero" role="banner">
  Dark:   <header class="au-header au-header--hero au-header--dark" role="banner">
-->

<header class="au-grid au-header au-header--hero au-header--dark" role="banner">
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="au-header__brand">
          <img class="au-header__brand-image" alt="Insert alternate text here" src="http://placehold.it/256x80">
          <div class="au-header__text">
            <h1 class="au-header__heading">Site title</h1>
            <div class="au-header__subline">
              Service description that could be a little longer
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="col-md-3">Extras</div> -->
    </div>
  </div>
</header>
/*
  Light:  <AUheader hero>
  Dark:   <AUheader hero dark>
*/

import AUheader, { AUheaderBrand } from '@gov.au/header';

<AUheader hero>
  <div className="container-fluid">
    <div className="row">
      <div className="col-md-9">
        <AUheaderBrand
          title="Page title" 
          subline="Service sub-title that could be a little longer"
          link="#"
          brandImage="http://placehold.it/256x80"
          brandImageAlt="Insert alternate text here"
        />
      </div>
    </div>
  </div>
</AUheader>