GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

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 elements are required for all pages unless noted.

  1. The contextual band contains three links specific to your site or product. You can choose which links go there. Optional for all pages.
  2. The main band contains links to common Government of Canada themes. These links cannot be changed. Optional for pages that aren’t standard pages.
  3. 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.
  4. 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.
Website footer taxonomy with four sections. First section Contextual navigation in light dark blue banner with Contextual Navigation as a Head title section link and Why GC Notify and Features as sub sections links. Second section is Main band GC links with Governement of Canada as the Head title section link with multiple sub sections links like All Contacts, Departments and agencies, Jobs, Taxes and so on. The third section is the Footer links bands in a light grey banner with some links like Social media, Mobile applications, About Canada.ca and so on. The fourth section is the Canada wordmark indicating Canada logo.

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.

Always include the following components on a standard page:
  • 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.
Always preserve the integrity of the Government of Canada signature. Never modify it in any way, stretch it, or change the colours or text. It’s optional to include the following components on a standard page:
  • Contextual band.
 It’s optional to include the following components on pages that are not standard pages.
  • 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.
  • 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 account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-07-17