Footer โ
Footers communicate to users that they have arrived at the bottom of a page. Footers are a great way to display site navigation and additional information that can be useful to users once they finished scrolling through the page.
This component is a must-have for all website pages as it contains page links, a social media bar and legal meta links.
Usage guidelines โ
When to use โ
Use footer at the bottom of every page of your website.
Writing guidelines โ
Labels
Text displayed in footers is in most cases under the form of links. Keep link labels descriptive and concise. Make sure the labelling is the same as in the top navigation.
Capitalization and case
Write labels in sentence case and without punctuation.
Specifications โ
Anatomy โ
- Container
- Navigation columns (up to 4)
- Social media bar
- Legal links
Size โ
Footer is available in four sizes covering the four breakpoints (desktop, tablet landscape, tablet portrait and mobile).
Variants โ
Variants with 2, 3 or 4 columns are available for each of the footer's sizes.
Styling โ
- Footer is currently available only with a dark background. You can choose between Zurich Blue and Dark Blue as background colors.
- If it helps convey the meaning, you can add icons to navigation links. For consistency, if you choose to add icons, make sure to add them to every item.
- You can remove individual items or groups of items according to your needs.
Behavior โ
Positioning and Alignment โ
Footer is always the bottom-most element of a web page. It occupies the whole width of the browser page.
Interaction โ
Footers display a series of links that let users navigate through different sections of the website or to social media pages. Therefore, links are available in different states: enabled, hover, pressed, focused or disabled.
Accessibility โ
General considerations โ
- Consideration 1
- Consideration 2
Keyboard interaction
- Tab:to move focus
- Space/Enter:to activate