Main band and sub-footer band with no optional links
The global (site-wide) footer at the bottom of each web page contains up to 3 bands:
- Contextual band
- Main band
- Sub-footer band
The contextual band is optional on all page types (standard, transactional, campaign).
On transactional and campaign pages, you can omit the Social media, Mobile applications and About Canada.ca links from the sub-footer band.
Reference implementation
<footer id="wb-info">
<h2 class="wb-inv">About this site</h2>
<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/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>For GCWeb-Jekyll theme
By setting the noFooterContextual and noFooterCorporate variables to “true”, the contextual band and optional links from the sub-footer band will be hidden on page load.</p>
Guidance
Consult the Canada.ca Design System for guidance on which footer elements to use based on the type of page you’re creating:
Page details
- Date modified: