Contextual 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
On transactional and campaign pages, the main band is optional.
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/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>
For GCWeb-Jekyll theme
By setting the noFooterMain
variable to “true”, the main 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: