Footer
<gcds-footer>

Also called: site footer.

The footer is the responsive Government of Canada branded footer landmark.

• GitHub
• Figma

Footer component preview

Footer anatomy – recommended elements

1. The GC footer links band spans the bottom of the page. It contains the official Government of Canada wordmark and links to product terms and conditions and privacy statements, as well as optional links to Canada.ca pages for social media, apps, and about.
2. The Canada wordmark is the global identifier of the Government of Canada and one of three official symbols of the Government of Canada's identity.

Optional footer elements

1. The contextual band lets you include three footer links for your site or product. It's the topmost band of the footer.
2. The main band with Government of Canada links provides a large selection of corporate links to Government of Canada services and products.
3. The GC footer links band spans the bottom of the page. It contains the official Government of Canada wordmark and links to product terms and conditions and privacy statements, as well as optional links to Canada.ca pages for social media, apps, and about.
4. The Canada wordmark is the global identifier of the Government of Canada and one of three official symbols of the Government of Canada's identity.

Design and accessibility for footers

Assemble your product's footer

• Include the footer links band for Government of Canada sites and products.

• Always maintain the integrity of the Government of Canada wordmark. Absolutely avoid modifying the wordmark in any way. In particular avoid stretching or changing the colours or text.

• Consider using the contextual band with up to three site-specific links for a transactional product, like an app, a form, or a storefront.

• Opt to include the main band for pages on Canada.ca

Write specific link text

• Make link text clear and specific to help a person decide if they should leave the current page. Spell out where a person will go or what they'll find when they select a link.

• Keep link text short and distinctive so a person can scan the links in the footer and find what they're looking for. Avoid using "click here" or "read more" as link text.

• Limit the number of links in your footer. Too much information increases cognitive load and can be overwhelming to some readers.