Footer

Usage

Example

Footer stays consistent throughout the site and is often the place where users scroll to if they feel lost or don't find what they are looking for. It's a good place provide the user an additional way to navigate the service and to information that is hard to find through primary navigation, for example contact info, copyright and legal statements. The footer can also be used to engage the user with actions and links to social media.

Principles

• It is strongly recommended to always include the footer component in your service and on every page of the service.
• Always position the footer to the bottom of the page.
• Footer component is built to follow HDS breakpoint tokens. While it is recommended to follow HDS breakpoint tokens, you may alter footer width to fit your service's needs.
• Keep the order of footer sections (navigation, utility, custom, base) and actions consistent. Do not change the default order without a good reason.
• The footer navigation should follow the same structure and labelling as the primary navigation. All top level pages included in the primary navigation should also be visible in footer navigation.
• If sub-pages are included in the footer, they should also follow the same structure and labelling as in the primary navigation. All same-level sub-pages should be visible.

Variations

The Footer consists of four possible sections: navigation, utility, custom and base. Each section is customisable to fit the needs of the service. It is recommended that the footer includes at least navigation and base sections. The utility and custom sections can be omitted entirely if not needed.

• Navigation section (recommended) contains the name of the service and footer navigation. See the Navigation section variations for more information about customising the footer navigation.
• Utility section (optional) contains links and actions not listed in main navigation, for example, social media icons, and links to contact info, feedback, or back to top. See the Utility section variations for more information.
• Custom section (optional) is for any content that you wish to include in the footer that doesn't fit elsewhere. You can put whatever you wish there but we recommend to keep the styling consistent with the rest of the Footer.
• Base section (recommended) contains the logo and is used for supplementary information, for example copyright information and links to other meta information, e.g. accessibility statement, privacy policy, terms of use, etc.

Default

The default footer uses the black text colour variant and includes three sections.

• The navigation section shows the service name and navigation. Navigation is optimised for up to eight menu items.
• Utility section is optimised to display up to three action links and five social media icons. An icon can be added to action links.
• Base section includes the logo, text for copyright or other meta information. The base section is optimised for up to five supplementary links, depending on link length.

Colour variations

The Footer component supports light and dark themes.

Navigation section variations

Navigation section two different layout options:

• Default navigation includes only the main level navigation items. The layout is optimised for up to eight menu items.
• Sitemap navigation includes also second-level sub-pages. Sitemap can be used in footer to help the user find pages quickly from a complicated page hierarchy. Note that on smaller screens the second-level sub-pages are hidden.
• The navigation can also be omitted.

Utility section variations

Utility section has two different layout options:

• Default: optimised to display up to three action links and five social media icons.
• Utility groups: optimised to display up to four groups of utility links.
• The utility section can also be omitted.