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 Open responsive preview

<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; 2025 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 Open responsive preview

<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; 2025 Department of Agriculture, Fisheries and Forestry
		</Text>
	</Footer>
</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 gap={1.5} padding={1.5}>
			<H4>Footer: on light body background</H4>
			<Footer>
				<nav aria-label="footer">
					<LinkList
						horizontal
						links={[
							{ href: '#1', label: 'Accessibility' },
							{ href: '#2', label: 'Disclaimer' },
							{ href: '#3', label: 'Privacy' },
						]}
					/>
				</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; 2025 Department of Agriculture, Fisheries and Forestry
				</Text>
			</Footer>
		</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
			<H4>Footer: on light bodyAlt background</H4>
			<Footer background="bodyAlt">
				<nav aria-label="footer">
					<LinkList
						horizontal
						links={[
							{ href: '#1', label: 'Accessibility' },
							{ href: '#2', label: 'Disclaimer' },
							{ href: '#3', label: 'Privacy' },
						]}
					/>
				</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>
		</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 gap={1.5} padding={1.5}>
			<H4>Footer: on dark body background</H4>
			<Footer>
				<nav aria-label="footer">
					<LinkList
						horizontal
						links={[
							{ href: '#1', label: 'Accessibility' },
							{ href: '#2', label: 'Disclaimer' },
							{ href: '#3', label: 'Privacy' },
						]}
					/>
				</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; 2025 Department of Agriculture, Fisheries and Forestry
				</Text>
			</Footer>
		</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
			<H4>Footer: on dark bodyAlt background</H4>
			<Footer background="bodyAlt">
				<nav aria-label="footer">
					<LinkList
						horizontal
						links={[
							{ href: '#1', label: 'Accessibility' },
							{ href: '#2', label: 'Disclaimer' },
							{ href: '#3', label: 'Privacy' },
						]}
					/>
				</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>
		</Stack>
	</>
</Box>

Edit this page