Versions Compared

Version Old Version 6 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component link

Panel
panelIconIdefa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:Storybook:
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 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

 

Item

Component type

Content type

Notes

1

Links

 Link

Text

 

2

Copyright statement

 Typography

Rich text

 

3

Disclaimer

 Typography

Rich text

 

4

Social media links

Link

Image

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

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

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

  • n/a

tbd…  

  • n/a - Contained component accessibility guidelines apply.