Header

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

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

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

Related components

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