Header

v5.0.0

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 @gold.au/header
Tags
Requires
Contributors
  • Hannah J. Nicdao avatar picture
  • Julian Fleetwood avatar picture
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Patrick De Young avatar picture
  • Alex Page 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="https://gold.designsystemau.org/assets/img/placeholder/256x80.png">
          <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 '@gold.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="https://gold.designsystemau.org/assets/img/placeholder/256x80.png"
          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="https://gold.designsystemau.org/assets/img/placeholder/256x80.png">
          <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 '@gold.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="https://gold.designsystemau.org/assets/img/placeholder/256x80.png"
          brandImageAlt="Insert alternate text here"
        />
      </div>
    </div>
  </div>
</AUheader>

Related components

Feedback