Footer
Footers live at the bottom of a page and help users find supplementary information relevant to their needs.
import { ... } from '@ag.ds-next/react/footer';
<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}> © 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}> © 2024 Department of Agriculture, Fisheries and Forestry </Text> </Footer> </Box>