Previous footer versions
Version 6.0
- Changed the “Veterans and military” URL.
Working example: Footer version 6.0
Expected output code
<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://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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</footer>Version 5.0 (deprecated)
- Changed “All Contacts” to “All contacts”.
Working example: Footer version 5.0
Expected output code
<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://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.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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</footer>Version 4.0 (deprecated)
The following changes have been made since version 2.0:
- Added a contextual band above the main band.
- GCWeb Jekyll specific: The title and links are defined globally in
_config.yml. It is also possible to remove the contextual footer globally by removing its definition in_config.yml. - GCWeb Jekyll specific: The title and links can be changed for specific pages in the page's
contextualFooterproperty.
- GCWeb Jekyll specific: The title and links are defined globally in
- The
.landscapeclass 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
.brandclass was renamed to.gc-sub-footer - The links "Terms and conditions" and "Privacy" have to remain visible at all times, even when
noFooterCorporateis 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.
Working example: Footer version 4.0 (deprecated)
Expected output code
<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://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.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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</footer>Version 3.0 (deprecated)
The following changes have been made since version 2.0:
- Added a "Contextual" section above the "About government" section.
- GCWeb Jekyll specific: The title and links are defined globally in
_config.yml. It is also possible to remove the contextual footer globally by removing its definition in_config.yml. - GCWeb Jekyll specific: The title and links can be changed for specific pages in the page's
supportFooterproperty.
- GCWeb Jekyll specific: The title and links are defined globally in
- Added new heading "Government of Canada" in the "About government" section.
- Added row of government-wide links.
- Added short white horizontal rule to separate government-wide links and theme links.
- Modified the list of theme links.
- The classes for the thematic links list were updated to
list-col-xs-1 list-col-sm-2 list-col-md-3.- The columns 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.
- Split utility links into two unordered lists since some links can no longer be hidden.
- Added short grey vertical rule between the two lists for
mdandlgbreakpoints. - Added short grey horizontal rule between the two lists for
xxsandxsbreakpoints. - On the
smbreakpoint, the two lists are visually separated by being one above the other.
- Added short grey vertical rule between the two lists for
- Removed "Top of page" anchor.
- Complete rework of the footer's headings for accessibility.
- GCWeb Jekyll specific: Footer skip link should remain when only the contextual footer is displayed.
Working example: Footer version 3.0 (deprecated)
Expected output code
<footer id="wb-info">
<h2 class="wb-inv">About this site</h2>
<div class="gc-contextual">
<div class="container">
<nav>
<h3>[Contextual footer title]</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="landscape">
<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 wide audiences</span></h4>
<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3">
<li><a href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</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 and industry</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://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 finances</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.html">Veterans</a></li>
<li><a href="https://www.canada.ca/en/services/youth.html">Youth</a></li>
</ul>
</nav>
</div>
</div>
<div class="brand">
<div class="container d-flex align-items-center">
<nav>
<h3 class="wb-inv">Support links</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://www1.canada.ca/en/newsite.html">About Canada.ca</a></li>
</ul>
<h4><span class="wb-inv">Transparency</span></h4>
<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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</footer>Version 2.0 (deprecated)
This is version 2.0 of the default page footer.
Updated to use the colcount-xs-2 class instead of colcount-sm-2.
Working example: Footer version 2.0
Expected output code
<footer id="wb-info">
<div class="landscape">
<nav class="container wb-navcurr">
<h2 class="wb-inv">About government</h2>
<ul class="list-unstyled colcount-xs-2 colcount-md-3">
<li><a href="https://www.canada.ca/en/contact.html">Contact us</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/publicservice.html">Public service and military</a></li>
<li><a href="https://www.canada.ca/en/news.html">News</a></li>
<li><a href="https://www.canada.ca/en/government/system/laws.html">Treaties, laws and regulations</a></li>
<li><a href="https://www.canada.ca/en/transparency/reporting.html">Government-wide reporting</a></li>
<li><a href="https://pm.gc.ca/eng">Prime Minister</a></li>
<li><a href="https://www.canada.ca/en/government/system.html">How government works</a></li>
<li><a href="https://open.canada.ca/en/">Open government</a></li>
</ul>
</nav>
</div>
<div class="brand">
<div class="container">
<div class="row">
<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
<h2 class="wb-inv">About this site</h2>
<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://www1.canada.ca/en/newsite.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="col-xs-6 visible-sm visible-xs tofpg">
<a href="#wb-cont">Top of Page <span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 text-right"><img src="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</div>
</footer>Version 1.0 (deprecated)
This is version 1.0 (deprecated) of the default page footer.
Working example: Footer version 1.0 (deprecated)
Expected output code
<footer id="wb-info">
<div class="landscape">
<nav class="container wb-navcurr">
<h2 class="wb-inv">About government</h2>
<ul class="list-unstyled colcount-sm-2 colcount-md-3">
<li><a href="https://www.canada.ca/en/contact.html">Contact us</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/publicservice.html">Public service and military</a></li>
<li><a href="https://www.canada.ca/en/news.html">News</a></li>
<li><a href="https://www.canada.ca/en/government/system/laws.html">Treaties, laws and regulations</a></li>
<li><a href="https://www.canada.ca/en/transparency/reporting.html">Government-wide reporting</a></li>
<li><a href="https://pm.gc.ca/eng">Prime Minister</a></li>
<li><a href="https://www.canada.ca/en/government/system.html">How government works</a></li>
<li><a href="https://open.canada.ca/en/">Open government</a></li>
</ul>
</nav>
</div>
<div class="brand">
<div class="container">
<div class="row">
<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
<h2 class="wb-inv">About this site</h2>
<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://www1.canada.ca/en/newsite.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="col-xs-6 visible-sm visible-xs tofpg">
<a href="#wb-cont">Top of Page <span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 text-right"><img src="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</div>
</footer>Page details
- Date modified: