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, 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 three sections: navigation, utility 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 section can be omitted entirely if not needed. Parts of the sections can also be hidden.

• Navigation section contains the Helsinki framed logo, the name of the service and footer navigation. Navigation section variations for more information about customising the footer navigation.
• Utility section contains links and actions not listed in main navigation, for example, social media icons, and links to contact info, feedback, or back to top.
• Base section 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 all three sections.

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

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.
• Minimal navigation includes only the main level navigation items. The layout is optimised for up to four 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.
• The navigation can also be hidden altogether.