Header

The Header is the masthead of our applications. It incorporates the Department of Agriculture, Fisheries and Forestry Coat of Arms logo and provides a user context on where they are.

View in Figma View in Storybook View in Github

import { ... } from '@ag.ds-next/react/header';

Open in Playroom, opens in a new tab Open responsive preview

<Box palette="dark">
	<Header
		heading="Export Service"
		subline="Supporting Australian agricultural exports"
		logo={<Logo />}
		background="bodyAlt"
		badgeLabel="Beta"
	/>
</Box>

use the examples from the gallery
change the text to suit your application.

Don’t

add unsupported elements such as avatars or drop downs.

Heading

Heading should be set to the website or service title.

Subline

Subline can provide additional information to describe your website or service.

Badge

We use a badge to indicate if an application is in a prerelease state. Use the badgeLabel prop to implement.

Size

The size prop can be used to control the vertical height of the Header. Use the sm variant for internal applications where space is limited.

Open in Playroom, opens in a new tab Open responsive preview

<Box palette="dark">
	<Header
		heading="Export Service"
		subline="Supporting Australian agricultural exports"
		logo={<Logo />}
		background="bodyAlt"
		size="sm"
	/>
</Box>

Co-branding

The header component can be used with no logo, one logo, or two logos when the Australian Government Brand Guidelines for Program or International branding are met. Each logo can be a link when an href and secondHref are defined.

Note: The first logo’s href will be assigned to the heading and subline text as well.

Open in Playroom, opens in a new tab Open responsive preview

<Box palette="dark">
	<Header
		heading="Co-branding header"
		subline="Co-branding subline"
		logo={<Logo />}
		background="bodyAlt"
		size="sm"
		href="#first-href"
		secondLogo={
			<svg
				aria-label="Australian Institute of Sport"
				height="40"
				role="img"
				viewBox="0 0 113 40"
				width="113"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M70.76 11.282c.093-.28.187-.373.373-.373.093 0 .28 0 .373.373l2.704 9.883h-6.154l2.704-9.883Zm3.73-.84c-.653-2.237-2.424-2.517-3.357-2.517-1.025 0-2.797.373-3.45 2.518l-5.78 20.14v.28c0 .466.372.745.745.745h1.865c.373 0 .746-.28.84-.652l1.957-6.9h7.646l1.958 6.9c.093.373.373.652.746.652h1.865c.466 0 .746-.28.746-.746v-.28l-5.781-20.14ZM89.687 8.205H88.01a.836.836 0 0 0-.84.84v21.817c0 .467.374.84.84.84h1.678c.467 0 .84-.467.84-.84V9.044c-.094-.466-.373-.839-.84-.839ZM107.405 18.928l-2.89-1.679c-2.238-1.398-3.264-2.237-3.264-3.543 0-2.051 1.119-2.704 4.289-2.704 1.772 0 4.01.093 5.315.187h.093c.466 0 .746-.28.746-.746V9.137c0-.28-.093-.652-.746-.745-1.119-.187-3.543-.373-5.408-.373-5.035 0-7.646 1.958-7.646 5.78 0 2.798 1.772 4.383 4.383 6.061l2.983 1.865c2.891 1.771 3.637 2.61 3.637 3.916 0 1.678-.56 3.357-4.476 3.357-1.492 0-3.729-.094-5.128-.187H99.2c-.466 0-.746.28-.746.746v1.212c0 .466.187.746.84.84 1.398.186 3.076.465 5.221.465 6.899 0 7.925-4.009 7.925-6.433 0-2.797-1.399-4.569-5.035-6.713Z"
					fill="currentColor"
				/>
				<path
					d="m29.641 5.874-1.305 1.119S43.348 29.09 43.814 29.837c.56.746 1.492 2.144 1.678 3.077l.933-1.585c-.094-.653-.373-1.306-.84-1.959L29.641 5.875ZM31.973 3.916l-1.305 1.119S45.027 26.2 45.493 26.946c.56.746 1.492 2.145 1.678 3.077l.933-1.585c-.093-.652-.373-1.305-.84-1.958-1.77-2.61-15.29-22.564-15.29-22.564ZM34.397 1.958l-1.305 1.119s13.706 20.14 14.172 20.886c.56.746 1.492 2.144 1.679 3.077l.839-1.492c-.093-.653-.466-1.399-.84-2.051-1.77-2.704-14.545-21.539-14.545-21.539ZM50.62 20.606 36.634 0l-1.212 1.026s13.053 19.207 13.52 19.953c.56.746 1.492 2.145 1.585 3.17l.839-1.492c0-.56-.187-1.305-.746-2.05ZM27.31 7.925l-1.212 1.12c.093.093 2.424 3.45 5.222 7.738-2.89-1.398-15.944-7.832-16.877-8.205-.839-.373-3.17-1.305-4.196-.746L9.222 9.138c1.119-.467 2.517 0 3.45.373.932.372 17.249 8.391 20.512 9.976l1.679 2.518c-9.79-4.756-21.725-10.63-22.378-10.91-.839-.372-2.984-1.212-4.102-.745l-1.026 1.305c1.119-.466 2.61 0 3.357.373.652.28 15.477 7.552 25.92 12.68l1.679 2.518c-4.942-2.424-26.854-13.147-27.786-13.52-.84-.373-2.984-1.305-4.196-.746l-1.025 1.306c1.119-.466 2.61 0 3.356.373.933.466 27.786 13.52 31.422 15.291.746 1.026 1.305 1.865 1.678 2.424-6.806-3.356-32.26-15.757-33.193-16.13-.84-.373-2.984-1.306-4.196-.84L3.348 16.69c1.118-.466 2.61.093 3.356.373 1.026.466 32.168 15.664 35.898 17.53 0 .092-.094.279-.187.372-.373.466-1.026.56-1.865.186-.839-.372-7.459-3.73-14.638-7.179-9.324-4.569-18.928-9.23-20.047-9.697-1.678-.746-3.45-.373-4.569.933-1.119 1.212-1.212 2.89-.28 4.475C2.417 26.014 11.46 39.441 11.833 40l1.399-.932c-.093-.187-9.324-13.986-10.816-16.317-.56-.933-.56-1.772.093-2.518l.094-.093c.093.28.28.653.466 1.026 1.398 2.33 11.282 16.97 11.375 17.062l1.399-.932c-.094-.093-9.884-14.825-11.282-17.156-.187-.28-.28-.56-.373-.746.373 0 .652.093 1.025.186.094.094.467.187.933.467C8.01 22.937 16.96 36.364 17.054 36.55l1.399-.839c-.094-.093-7.46-11.282-9.418-14.172.746.372 1.585.745 2.425 1.212 1.864 2.797 8.111 12.214 8.111 12.307l1.399-.839c-1.026-1.585-5.221-7.832-6.527-9.977.84.373 1.585.746 2.424 1.213 1.492 2.237 5.315 7.925 5.315 8.018l1.399-.932s-2.611-3.916-3.823-5.688c1.865.933 3.73 1.772 5.501 2.704 7.46 3.637 13.8 6.807 14.639 7.18 1.398.652 2.983.466 3.822-.653.747-.933 1.026-2.238-.093-4.01-1.678-2.61-16.13-23.962-16.317-24.149Z"
					fill="#FFC709"
				/>
			</svg>
		}
		secondHref="#second-href"
	/>
</Box>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

This component has a 'bodyAlt' variant. Components with a 'bodyAlt' variant utiliseshadeAlt to highlight interface components and content that sit on 'bodyAlt' background. shadeAlt is also used to fill interactive components, ensuring sufficient contrast is maintained for hover states.

Light palette

Open in Playroom, opens in a new tab Open responsive preview

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<>
		<Stack>
			<H4 paddingTop={1.5} paddingX={{ xs: 0.75, md: 1.5 }}>
				Header: on light body background
			</H4>
			<Header
				badgeLabel="Beta"
				heading="Export Service"
				logo={<Logo />}
				subline="Supporting Australian agricultural exports"
			/>
		</Stack>
		<Stack background="bodyAlt">
			<H4 paddingTop={1.5} paddingX={{ xs: 0.75, md: 1.5 }}>
				Header: on light bodyAlt background
			</H4>
			<Header
				background="bodyAlt"
				badgeLabel="Beta"
				heading="Export Service"
				logo={<Logo />}
				subline="Supporting Australian agricultural exports"
			/>
		</Stack>
	</>
</Box>

Dark palette

Open in Playroom, opens in a new tab Open responsive preview

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<>
		<Stack>
			<H4 paddingTop={1.5} paddingX={{ xs: 0.75, md: 1.5 }}>
				Header: on dark body background
			</H4>
			<Header
				badgeLabel="Beta"
				heading="Export Service"
				logo={<Logo />}
				subline="Supporting Australian agricultural exports"
			/>
		</Stack>
		<Stack background="bodyAlt">
			<H4 paddingTop={1.5} paddingX={{ xs: 0.75, md: 1.5 }}>
				Header: on dark bodyAlt background
			</H4>
			<Header
				background="bodyAlt"
				badgeLabel="Beta"
				heading="Export Service"
				logo={<Logo />}
				subline="Supporting Australian agricultural exports"
			/>
		</Stack>
	</>
</Box>

App layout – The app layout provides a consistent way for users to navigate around a web application and access their account settings.
Main nav – The main nav is the primary way users navigate the user interface. It is consistently visible throughout the service.

Edit this page

Header

Heading

Subline

Badge

Size

Co-branding

Colour

Light palette

Dark palette

Related components