Footer
The global (site-wide) footer at the bottom of each web page can contain up to 3 bands:
- Contextual band
- Main band
- Sub-footer band
Consult the Canada.ca Design System for guidance on which footer elements or custom implementations to use based on the type of page you’re creating:
Latest changes
Version 7.0
The following changes have been made since version 4.0:
- Version 7.0 : Added “www.” to the “Canada and the world” URL.
- Version 6.0 : Changed the “Veterans and military” URL.
- Version 5.0 : Changed “All Contacts” to “All contacts”.
The following changes have been made since version 2.0:
- Added a contextual band above the main band.
- The
.landscape
class was renamed to.gc-main-footer
- Added new heading “Government of Canada” in the main band.
- Added row of government-wide links.
- Added short white horizontal rule to separate government-wide links and theme and topics links.
- Modified the list of themes and topics links.
- The classes for the themes and topics links list were updated to
list-col-xs-1 list-col-sm-2 list-col-md-3
.- Some lists now use the CSS “Flexbox” feature which distributes links horizontally instead of vertically.
- Links are now displayed in one (1) column on extra small screens, in two (2) columns on small screens, and in three (3) columns on medium screens and up.
- The
.brand
class was renamed to.gc-sub-footer
- The links “Terms and conditions” and “Privacy” have to remain visible at all times, even when
noFooterCorporate
is set to true. - Removed “Top of page” anchor.
- Complete rework of the footer’s headings for accessibility.
- GCWeb Jekyll specific: Footer skip link should always remain.
Reference implementation
<footer id="wb-info">
<h2 class="wb-inv">About this site</h2>
<div class="gc-contextual">
<div class="container">
<nav>
<h3>[Contextual footer header]</h3>
<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3"><li><a href="http://canada.ca/en">Contextual link 1</a></li><li><a href="http://canada.ca/en">Contextual link 2</a></li><li><a href="http://canada.ca/en">Contextual link 3</a></li></ul>
</nav>
</div>
</div>
<div class="gc-main-footer">
<div class="container">
<nav>
<h3>Government of Canada</h3>
<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3"><li><a href="https://www.canada.ca/en/contact.html">All contacts</a></li>
<li><a href="https://www.canada.ca/en/government/dept.html">Departments and agencies</a></li>
<li><a href="https://www.canada.ca/en/government/system.html">About government</a></li></ul>
<h4><span class="wb-inv">Themes and topics</span></h4>
<ul class="list-unstyled colcount-sm-2 colcount-md-3"><li><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></li>
<li><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
<li><a href="https://travel.gc.ca/">Travel and tourism</a></li>
<li><a href="https://www.canada.ca/en/services/business.html">Business</a></li>
<li><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
<li><a href="https://www.canada.ca/en/services/health.html">Health</a></li>
<li><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
<li><a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
<li><a href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
<li><a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
<li><a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
<li><a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
<li><a href="https://www.international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
<li><a href="https://www.canada.ca/en/services/finance.html">Money and finance</a></li>
<li><a href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li>
<li><a href="https://www.canada.ca/en/services/indigenous-peoples.html">Indigenous peoples</a></li>
<li><a href="https://www.canada.ca/en/services/veterans-military.html">Veterans and military</a></li>
<li><a href="https://www.canada.ca/en/services/youth.html">Youth</a></li></ul>
</nav>
</div>
</div>
<div class="gc-sub-footer">
<div class="container d-flex align-items-center">
<nav>
<h3 class="wb-inv">Government of Canada Corporate</h3>
<ul>
<li><a href="https://www.canada.ca/en/social.html">Social media</a></li>
<li><a href="https://www.canada.ca/en/mobile.html">Mobile applications</a></li>
<li><a href="https://www.canada.ca/en/government/about.html">About Canada.ca</a></li><li><a href="https://www.canada.ca/en/transparency/terms.html">Terms and conditions</a></li>
<li><a href="https://www.canada.ca/en/transparency/privacy.html">Privacy</a></li></ul>
</nav>
<div class="wtrmrk align-self-end">
<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada" />
</div>
</div>
</div>
</footer>
Alternate implementations
Standard pages
Transactional or campaign pages only
- Main band and sub-footer band only
- Main band and sub-footer band with no optional links
- Contextual band and sub-footer band
- Contextual band and sub-footer band with no optional links
- Sub-footer band only
- Sub-footer band with no optional links
GCWeb-Jekyll implementation
- For the contextual band over the main band:
- the title and links are defined globally in
_config.yml
. It is also possible to remove the contextual band globally by removing its definition in_config.yml
. - the title and links can be changed for specific pages in the page’s
contextualFooter
property.
- the title and links are defined globally in
- The links “Terms and conditions” and “Privacy” are visible at all times, even when
noFooterCorporate
is set to true. - Footer skip link should always remain.
Previous footer versions
Here is a list of previous footer versions with their associated code samples.
Page details
- Date modified: