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.12

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
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Hannah J. Nicdao avatar picture
  • Julian Fleetwood avatar picture
  • Trevor Brennan avatar picture
  • Simon Pascal Klein avatar picture
  • Alex Page avatar picture
  • Petra Gulicher avatar picture

SCSS variables

Variable name Default value Description
$AU-logo-width 12unit Logo max-width for mobile devices (xs)
$AU-logo-width-sm 16unit Logo max-width for larger devices (sm+)

React Usage

import AUheader, { AUheaderBrand } from './header.js';

<AUheader>
    <AUheaderBrand
        link="#"
        brandImage="https://designsystem.gov.au/assets/img/placeholder/256x80.png"
        brandImageAlt="Digital Transformation Agency"
    />
</AUheader>

Props

AUheader

Prop name Type Description
hero boolean The hero option that provides larger whitespace
alt boolean An alternate variation of the component
dark boolean A dark variation of the component

All other props are spread into the component

AUheaderBrand

Prop name Type Description
hero boolean The hero option that provides larger whitespace
alt boolean An alternate variation of the component
dark boolean A dark variation of the component
title string The headline content, optional
level number The headline tag level, h1-h6, optional
subline string The subline content, optional
brandImage string The headline content, optional
brandImageAlt string Brand image alt tag
link string An optional link for the header brand, optional
linkComponent string The component used for the link, optional

All other props are spread into the component

Exports

Name Type Description
AUheader default The header component
AUheaderBrand named The branding information inside the AUheader component

node_modules import

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

pancake import

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