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
  • Gary Broadbent avatar picture
  • Simon Pascal Klein avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood 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://gold.designsystemau.org/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 '@gold.au/header';

pancake import

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

Related components

Feedback