Footer
<gcds-footer>
Also called: site footer.
The footer is the responsive Government of Canada branded footer landmark.
-
Required on Canada.ca -
Required on GC sites
-
GitHub -
Figma
Footer component preview
Footer anatomy
Footer elements are required for all pages unless noted.
- The contextual band contains three links specific to your site or product. You can choose which links go there. Optional for all pages.
- The main band contains links to common Government of Canada themes. These links cannot be changed. Optional for pages that aren’t standard pages.
-
The GC footer links band contains the official Government of Canada wordmark and up to five links. Some of the links are optional and some can be modified.
Optional for pages that aren’t standard pages:
- Social media directory for the GC.
- Mobile app directory for the GC.
- About Canada.ca.
Can be modified to your specific program:
- Terms and conditions.
- Privacy statement.
- The Canada wordmark is the global identifier of the Government of Canada. Always preserve the integrity of the Government of Canada signature. Never modify it in any way, stretch it, or change the colours or text.
Design and accessibility for footers
GC Design System components are designed to adapt to the size of the screen or frame where they’re being viewed. As an exception, the text size in the header and footer is fixed.
Check footer requirements
- Main band.
-
GC footer links band.
- Social media link.
- Mobile app link.
- About Canada.ca link.
- Terms and conditions link.
- Privacy statement link.
- Canada wordmark.
- Contextual band.
- Contextual band.
- Main band.
- Social media link in the GC footer links band.
- Mobile app link in the GC footer links band.
- About Canada.ca link in the GC footer links band.
Add optional bands
- Consider using the contextual band to give people specific actions or information related to your site.
- While required on all standard pages, consider using the main band for any pages on Canada.ca.
Modify links
- In the contextual band, modify the three links to your specific site. Choose links that people will expect to find in a footer, like “Contact us”, “Careers” or “News”.
- In the GC footer links band, modify the “Terms and conditions” and “Privacy” links to your specific site.
- 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.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an