Agriculture Design System
Beta
Design System for the Export Service

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 FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/header';
Open in Playroom, opens in a new tab
<Box palette="dark">
	<Header
		heading="Export Service"
		subline="Supporting Australian agricultural exports"
		logo={<Logo />}
		background="bodyAlt"
		badgeLabel="Beta"
	/>
</Box>

Do

  • 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
<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
<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>
  • 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