Previous footer versions
Version 7.0 (deprecated)
- Added "www." to the "Canada and the world" URL
Working example: Footer version 7.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://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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
</div>
</div>
</div>
</footer>Version 6.0 (deprecated)
- 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 (Removed as of GCWeb v16.0.0)
- Changed “All Contacts” to “All contacts”.
Version 4.0 (Removed as of GCWeb v16.0.0)
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.
Version 3.0 (Removed as of GCWeb v16.0.0)
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.
Version 2.0 (Removed as of GCWeb v16.0.0)
This is version 2.0 of the default page footer.
Updated to use the colcount-xs-2 class instead of colcount-sm-2.
Version 1.0 (Removed as of GCWeb v16.0.0)
This is version 1.0 (deprecated) of the default page footer.
Page details
- Date modified: