Footer
The footer appears at the bottom of a page, and provides helpful information to the user that should improve usability and navigation of the site.
How to use the footer
Use the footer to house any information or links that pertain to the site as a whole which don’t fit into the standard navigation. It should also house any copyright or legal information/links. There is also a flexible area where the designer can choose what content to put in, for example an email sign up form.
When using footer:
- Make sure the information is relevant on every page of the site or product
- As a minimum, the footer must contain the ‘our brands’ logo lock up, followed by any legal or copyright links
- Some relevant links to have in the link list section include "About us" or "Contact us"
- The flexible content section can house things such as an email sign up form, social media icons, etc.
Do not use the footer as navigation to things within the site’s core information architecture, for example do not link to ‘Electronics’ or ‘Groceries’. Use a header component for this kind of information instead.
Types of footer
The footer is made up of a mandatory section (our brands, legal section) which is always positioned at the bottom, and 2 optional sections (link lists, content sections) which sit at the top but can be switched in order. These are divided up with borders.
Minimal footer
This is the minimum any footer should have: the ‘our brands’ logo section, the legal section and the ‘technical’ links which should take the user to anything technical on the site such as our Accessibility statement
With content sections
The content sections are flexible, you can have between 1-4 sections and it is up to the designer what is in them. They must have section headers that describe that content concisely.
Do not put things in these sections that are not relevant or are going to make the footer very large, keep content concise.
With link lists
The link lists are here to house navigational links that don’t fit in the site/product’s core site architecture, such as ‘About Us’ or ‘Contact us’.
You can have up to 6 lists, and each list can have a maximum of 9 links. On mobile these lists become accordions.
Footer schemes
The footer has two different colour schemes: light scheme and dark scheme. The intention of the different schemes is to create sufficient contrast with the body of the site, so it is clear where the site ends and footer begins.
Light scheme
It is recommended you use the light scheme if the site background is a colour other than white, this means the footer will have sufficient contrast with the rest of the body of the site.
Dark scheme
It is recommended you use the dark scheme if the site background is white or a light colour, this means the footer will have sufficient contrast with the rest of the body of the site.
If using the dark scheme, ensure there is sufficient colour contrast with any icons, logos etc by making them monochrome rather than colour.
Content guidelines
Link copy should be succinct and not more than 3 words.
Heading section copy should also be short and concise, no more than 3 words, and should clearly describe the content that is in the footer section.