Footer

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

View in Figma View in Storybook View 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.

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

Open in Playroom, opens in a new tab

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

Edit this page