Agriculture Design System
Beta
Design System for the Export Service

Footer

Footers live at the bottom of a page and help users find supplementary information relevant to their needs.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/footer';
Open in Playroom, opens in a new tab
<Box palette="dark">
	<Footer background="bodyAlt">
		<Columns>
			<Column columnSpan={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
				<Stack gap={0.5}>
					<Heading as="h2" type="h3">
						Section title
					</Heading>
					<LinkList
						links={[
							{ href: '#', label: 'A really long link title' },
							{ href: '#', label: 'Terms and conditions' },
							{ href: '#', label: 'Another really long link title' },
						]}
					/>
				</Stack>
			</Column>
			<Column columnSpan={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
				<Stack gap={0.5}>
					<Heading as="h2" type="h3">
						Section
					</Heading>
					<LinkList
						links={[
							{ href: '#', label: 'Link 1' },
							{ href: '#', label: 'Link 2' },
							{ href: '#', label: 'Link 3' },
						]}
					/>
				</Stack>
			</Column>
			<Column columnSpan={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
				<Stack gap={0.5}>
					<Heading as="h2" type="h3">
						Section
					</Heading>
					<LinkList
						links={[
							{ href: '#', label: 'Link 1' },
							{ href: '#', label: 'Link 2' },
							{ href: '#', label: 'Link 3' },
						]}
					/>
				</Stack>
			</Column>
			<Column columnSpan={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
				<Stack gap={0.5}>
					<Heading as="h2" type="h3">
						Section
					</Heading>
					<LinkList
						links={[
							{ href: '#', label: 'Link 1' },
							{ href: '#', label: 'Link 2' },
							{ href: '#', label: 'Link 3' },
						]}
					/>
				</Stack>
			</Column>
		</Columns>
		<FooterDivider />
		<Text as="p">Footer text</Text>
		<Box maxWidth="240px">
			<Logo />
		</Box>
		<FooterDivider />
		<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
			&copy; 2024 Department of Agriculture, Fisheries and Forestry
		</Text>
	</Footer>
</Box>

The footer at the bottom of a page. Usually contains copyright information and links to other sections of the site.

Do

  • use for:
    • Acknowledgement of Country
    • copyright
    • ABN
    • contact details
    • privacy statement
    • social media links
    • links to other pages within the website.
  • use a streamlined footer unless there is a complex IA.
  • use horizontal dividers to break up content.

Don’t

  • place anywhere but the bottom of the page
  • use multiple footers per page
  • include the Coat of Arms in the footer if it already appears in the header
  • remove Acknowledgement of Country or copyright information
  • use if there are many navigational items – consider multiple link lists instead.

Streamlined

<Box palette="dark">
	<Footer background="bodyAlt">
		<nav aria-label="footer">
			<LinkList
				links={[
					{ href: '#1', label: 'Accessibility' },
					{ href: '#2', label: 'Disclaimer' },
					{ href: '#3', label: 'Privacy' },
				]}
				horizontal
			/>
		</nav>
		<FooterDivider />
		<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
			We acknowledge the traditional owners of country throughout Australia and
			recognise their continuing connection to land, waters and culture. We pay
			our respects to their Elders past, present and emerging.
		</Text>
		<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
			&copy; 2024 Department of Agriculture, Fisheries and Forestry
		</Text>
	</Footer>
</Box>