GC Design System Components Installation Page templates Contact us Get involved Find a demo GC Design System Components

Footer
<gcds-footer>

Also called: site footer.

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

Footer component preview

Use the Government of Canada branded footer landmark for a consistent, accessible, and responsive landmark for your site or product.

Coding and accessibility for footers

Choose a display mode using the display property

Use the display property to choose one of the two display modes: compact or full.

Choose the compact display to include:

  1. The footer links band and the Government of Canada wordmark.

Include the full display if you need to include:

  1. The main band with a large selection of Government of Canada corporate links.
  2. The footer links band and the Government of Canada wordmark.

Opt to include the contextual band to add up to three footer links for your product.

{
“1st link label”: “href”
“2nd link label”: “href”
“3rd link label”: “href”
}
{
“1st link label”: “href”
“2nd link label”: “href”
“3rd link label”: “href”
}

Get your code

Generate an instance of the component you need by selecting its code properties.

  1. Explore by choosing different code values to generate the instance you want.

  2. Get the code and pull it into your environment.

  3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.

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-04-02