Language selection

Search


Contextual band and link variations

The global (site-wide) footer at the bottom of each web page contains up to 3 bands:

Reference implementation

Expected output code - Contextual band and link variations
<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="mailto:info@example.com">Mail to email</a></li><li><a href="?abc=123#ancre">Query string and anchor</a></li><li><a href="../../">Up two folders</a></li><li><a href="tel:555-0123">Telephone number 555-0123</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 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-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>

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: