Contextual 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
On transactional and campaign pages, the main band is optional. You can also 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-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-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 noFooterMain and noFooterCorporate variables to “true”, the main band and optional links from the sub-footer band will be hidden on page load.
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: