Footer

The footer pattern presents the information that should be found at the bottom of all pages.

Rules for the footer

There are three components of the footer: the copyright footer, navigation menu footer and feedback footer.

  • The copyright footer must appear at the bottom of all pages without any modification. It contains copyright information, legal information and social media links.
  • The navigation menu footer contains links and contact information relevant to a specific section of the website.
  • The feedback footer provides a way to gather simple feedback on the usefulness of a specific page. It must appear directly before any of the other footer components.

In addition to this, logos can be used in the following places:

  • Within the footer if a single logo associated with a sub-brand.
  • Above the footer if used to show awards and accreditations.

Options available

Example
Code
  • The navigation menu footer should be used if needed and should contain content relevant to the section of the website where the page is located.
  • The navigation menu footer must never be included without the copyright footer below it.
  • The third column in the navigation menu footer must be reserved for the contact information.
  • Custom icons for social media links must not be added. Unique social media links must use text and can only be added to the navigation menu footer (see example below).
Example
Code
  • When used, the feedback option must appear above both the navigation menu footer and the copyright footer.
  • When a user choses a feedback option, an appropriate confirmation message must be shown.
Example
Code

The awards and affiliations logo pre-footer is used to display logos of affiliated partners, awards, and certifications.

  • The awards and affiliations logo pre-footer must only be used on the homepage of a website.
  • Links may be included to the relevant website or webpage for each logo.
Example
Code
Example
Code
The footer may be used to introduce additional branding that is unique to a particular website.
  • The logo should be placed at the top of the first column.
  • Where possible an SVG file type should be used to provide a crisp image at all sizes. If this is not possible then a PNG with transparent background should be used.
  • The image should be no larger than 280px wide and 180px high.
Example
Code