Main footer band and sub-footer band
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).
Reference implementation
Expected output code - Footer with no contextual band
<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/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>
GCWeb-Jekyll implementation
By setting the noFooterContextual
variable to “true”, the contextual band will be hidden on page load.
The contextual band is defined in _config.yml
, but can also be overwritten on any given page in the front matter section (view Complete footer for an example).
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:
2023-01-16