Versions Compared

Version Old Version 5 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Usage | Anatomy | Visual style | Editorial | Behaviour | Accessibility | Related components

Panel
panelIconId1f517293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:linkFigma:
panelIconText🔗:Figma:
bgColor#F4F5F7

Figma component link

Panel
panelIconId1f517efa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:linkStorybook:
panelIconText🔗:Storybook:
bgColor#F4F5F7

Storybook component

The footer sits at the bottom of the page and delivers navigation paths to key content that isn’t delivered in the header. This is traditionally legal and policy content and social pathways.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe
Tip

  • Use

disclosures when you want to provide relevant or related information without cluttering the page.

  • Don’t use a disclosure when content is relevant to all users.

  • Don’t use disclosures in list. Use Accordion instead.

  • Don’t use a disclosure when content within the accordion is very complex or can cause slow page loads.

WarningInsert image here

  • a footer to contain useful and frequently requested auxiliary links and information that you want present on most pages.

  • Include common links and information that are generally found in the footer of websites: address, contact details, etc

  • Link to social media profiles

  • Include accurate and up to date copyright information

Warning

  • Use more than one footer on a single page

  • Include lots of qualifying disclaimers

  • Include too many links

Image Added

 

Item

Component type

Content type

Notes

1

Legal Statement/s

Links

 Link

Text

 

2

(Additional) Legal Statements

Copyright statement

 Typography

RTA

Rich text

 

3

Link list

Disclaimer

 Typography

Rich text

 

4

Social media links

list

Link

Image

The footer comes in two mode to work with light and dark backgrounds: default, and inverse.

  • Ensure legal copyright and disclaimer content is approved by a legal team.

  • Keep navigation links clearly named and reflective of their destination.

  • n/a

 

  

  • n/a - Contained component accessibility guidelines apply.