Home page - Meta information
- Status
- Stable for GCWeb V5
- Type
- Template
- Last review
- 2022-07-07
- Conforming to
- Going to be: Content and IA spec 2.0
- Specification
- Home page for Canada.ca
- Available instances
- https://www.canada.ca/en.html
- https://www.canada.ca/fr.html
Technical specification
Component list and latest version
- Home page menu - Version 3.0
- Home page header - Version 3.0
- Home page banner - Version 2.2
- Promotional banner - Version 2.0
- Most requested - Version 1.0
- Home page service and information - Version 2.0
- Focus on - Version 1.0
- Your government - Version 2.0
- Government initiatives - Version 2.0
Home page menu
- Version
- 3.0
- Updated
- 2022-06-29
The grid for authenticated version of the menu bar in the homepage was updated.
Previous version
Home page header
- Version
- 3.0
- Updated
- 2022-09-10
This version requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
Refer to the header documentation in GCWeb for the expected output code.
List of changes
- Relocation of the container element from outside the "gcweb-menu" component to wrap the Site menu and the Breadcrumbs.
- Addition of an
<hr>element between the two containers in the header in replacement of the the border-top attribute from.gcweb-menucss class.
Previous versions
Home page banner
- Version
- 2.2
- Updated
- 2024-05-30
Latest version changes
The top and bottom margins of the class .header-rwd have been reduced by 1em to reach a reduction of 20 pixels.
Previous version
Version 2.1 - 2024-05-23
The spacing above and below the banner text block is removed on xs and xxs breakpoints.
Version 2.0 - 2019-05-09
The background image is loaded with the provisional plugin bgimg which set the background image. The background image is hosted in the WMS at this location. https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg.
The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.
Version 1.0 - 2018-12-27
The default background is gray (#eee) without image. The background image is hosted in the WMS at this location. https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg.
The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.
Promotional banner
The promotional banner are over, at the bottom, of the home page banner background image.
- Version
- 2.0
- Updated
- 2019-05-09
- Notes
- Provisional color was removed.
<div class="bg-cover" data-bgimg="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg">
<div class="container p-0 p-sm-3">
<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme">
<h1 property="name" id="wb-cont">Canada.ca</h1>
<p class="mrgn-tp-md">The official website of the Government of Canada</p>
</div>
</div>
<div class="bg-gctheme opct-90">
<div class="container">
<a class="figcaption text-white" href="#">
<figure class="clearfix">
<div><p class="pull-left mrgn-tp-md mrgn-bttm-md">Featured:</p></div>
<figcaption class="pull-left mrgn-tp-md mrgn-bttm-md">[Promotion title]</figcaption>
</figure>
</a>
</div>
</div>
</div>
Services and information
- Version
- 2.0
- Updated
- 2024-10-22
- Notes
- Services now limited to 9 with "All services" link.
<section class="gc-srvinfo">
<div class="container">
<h2 class="wb-inv">Home page services and information</h2>
<div class="wb-eqht row">
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></h3>
<p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></h3>
<p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://travel.gc.ca">Travel and tourism</a></h3>
<p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/business.html">Business and industry</a></h3>
<p>Starting a business, permits, copyright, business support, selling to government</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></h3>
<p>EI, family and sickness leave, pensions, housing, student aid, disabilities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></h3>
<p>Income tax, payroll, GST/HST, contribution limits, tax credits, charities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/health.html">Health</a></h3>
<p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></h3>
<p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/finance.html">Money and finances</a></h3>
<p>Personal finance, credit reports, fraud protection, paying for education</p>
</div>
</div>
<p>
<a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services</a>
</p>
</div>
</section>Previous version
Version 1.0
<section class="gc-srvinfo container">
<h2 class="wb-inv">Services and information</h2>
<div class="wb-eqht row">
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></h3>
<p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></h3>
<p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://travel.gc.ca">Travel and tourism</a></h3>
<p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/business.html">Business and industry</a></h3>
<p>Starting a business, permits, copyright, business support, selling to government</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></h3>
<p>EI, family and sickness leave, pensions, housing, student aid, disabilities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/health.html">Health</a></h3>
<p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></h3>
<p>Income tax, payroll, GST/HST, contribution limits, tax credits, charities</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></h3>
<p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/defence.html">National security and defence</a></h3>
<p>Military, transportation and cyber security, securing the border, counter-terrorism</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></h3>
<p>Arts, media, heritage, official languages, national identity and funding</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></h3>
<p>Safety, justice system, prepare for emergencies, services for victims of crime</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></h3>
<p>Aviation, marine, road, rail, dangerous goods, infrastructure projects</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></h3>
<p>Foreign policy, trade agreements, development work, global issues</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/finance.html">Money and finances</a></h3>
<p>Personal finance, credit reports, fraud protection, paying for education</p>
</div>
<div class="col-lg-4 col-md-6">
<h3><a href="https://www.canada.ca/en/services/science.html">Science and innovation</a></h3>
<p>Scientific research on health, environment and space, grants and funding</p>
</div>
</div>
</section>Transition from version 1.0 to version 2.0
- Remove the
containerclass from the<section class="gc-srvinfo">element. - Wrap the content inside the
<section class="gc-srvinfo">element with a<div class="container">element. - Remove the following service and information elements:
- National security and defence
- Culture, history and sport
- Policing, justice and emergencies
- Transport and infrastructure
- Canada and the world
- Science and innovation
- Add the following paragraph right before the end of the
<div class="container">:<p><a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services</a></p>
Your government
- Version
- 2.0
- Updated
- 2022-04-27
- Notes
- Links description was removed.
There are 8 links in this section presented in 2 columns.
<section class="home-your-gov well well-bold well-sm brdr-0">
<div class="container">
<h2>Your government</h2>
<div class="row mrgn-bttm-lg">
<div class="col-lg-7 col-xs-12 col-md-6">
<ul class="row wb-eqht-grd list-unstyled small">
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/contact.html">Contact us</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/news.html">News</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://pm.gc.ca/en">Prime Minister</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/government/dept.html">Departments and agencies</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/government/system.html">About government</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://open.canada.ca/en">Open government and data</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/government/publicservice.html">Working for the government</a>
</li>
<li class="col-xs-12 col-sm-6 mrgn-tp-sm mrgn-bttm-sm">
<a href="https://www.canada.ca/en/government/system/laws.html">Treaties, laws and regulations</a>
</li>
</ul>
</div>
</div>
</div>
</section>Previous version
Deprecated - Version 1.0
There were four links with descriptions.
<section class="home-your-gov well well-sm brdr-0">
<div class="container">
<h2>Your government</h2>
<div class="row mrgn-bttm-md">
<div class="col-lg-7 col-xs-12 col-md-6">
<div class="wb-eqht row">
<div class="col-lg-6">
<h3><a href="https://www.canada.ca/en/contact.html">Contact us</a></h3>
<p>Department and agency contacts, change your address</p>
</div>
<div class="col-lg-6">
<h3><a href="https://www.canada.ca/en/government/dept.html">Departments and agencies</a></h3>
<p>A list of current government and related organizations</p>
</div>
<div class="col-lg-6">
<h3><a href="https://www.canada.ca/en/government/system.html">How government works</a></h3>
<p>Government structure, priorities, finances and regulations</p>
</div>
<div class="col-lg-6">
<h3><a href="https://open.canada.ca/en">Open government</a></h3>
<p>Accessible government, open information and data, open dialogue</p>
</div>
</div>
</div>
</div>
</div>
</section>Government initiatives
- Version
- 2.0
- Updated
- 2024-09-16
- Notes
- Two feature items have been added for a total of four feature items.
- Implementation of the randomized functionality on each feature items so different images along with their links and descriptions appear on each page load.
There are four feature items in this section presented as four tiles in 2 columns.
<section class="container gc-features">
<h2>Government initiatives</h2>
<ul class="nojs-show">
<li><a href="#">[1. Feature hyperlink text]</a></li>
<li><a href="#">[2. Feature hyperlink text]</a></li>
<li><a href="#">[3. Feature hyperlink text]</a></li>
<li><a href="#">[4. Feature hyperlink text]</a></li>
<li><a href="#">[5. Feature hyperlink text]</a></li>
<li><a href="#">[6. Feature hyperlink text]</a></li>
<li><a href="#">[7. Feature hyperlink text]</a></li>
<li><a href="#">[8. Feature hyperlink text]</a></li>
</ul>
<div class="row wb-eqht">
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[1. Feature hyperlink text]</a></h3>
<p>1. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[2. Feature hyperlink text]</a></h3>
<p>2. Brief description of the feature being promoted.</p>
</section>
</div>
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[3. Feature hyperlink text]</a></h3>
<p>3. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[4. Feature hyperlink text]</a></h3>
<p>4. Brief description of the feature being promoted.</p>
</section>
</div>
</div>
<div class="row wb-eqht">
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[5. Feature hyperlink text]</a></h3>
<p>5. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[6. Feature hyperlink text]</a></h3>
<p>6. Brief description of the feature being promoted.</p>
</section>
</div>
<div class="col-sm-6" data-wb-randomize='{ "toggle": "hide" }'>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[7. Feature hyperlink text]</a></h3>
<p>7. Brief description of the feature being promoted.</p>
</section>
<section class="well well-sm eqht-trgt hide">
<img src="[image URL]" alt="">
<h3><a class="stretched-link" href="#">[8. Feature hyperlink text]</a></h3>
<p>8. Brief description of the feature being promoted.</p>
</section>
</div>
</div>
</section>Transition from version 1.0 to 2.0
- Add a second row of features under the first one.
- Add the attribute
data-wb-randomize='{ "toggle": "hide" }'to the<div class="col-sm-6">element wrapping the features groups. - Change the HTML tag for features from
<div>to<section> - Add the class
hideto the<section class="well well-sm eqht-trgt">elements (feature elements). - Above the
<div class="row">element, add a<ul class="nojs-show">with a list of the links for all the features contained in the<div class="row">element. This step is necessary for users of the basic HTML version.
Previous version
Deprecated - Version 1.0
There were two static feature items with links and descriptions.
<section class="container gc-features">
<h2>Government initiatives</h2>
<div class="row wb-eqht">
<div class="col-sm-6">
<div class="well well-sm brdr-rds-0 eqht-trgt">
<img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/>
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
</div>
<div class="col-sm-6">
<div class="well well-sm brdr-rds-0 eqht-trgt">
<img class="img-responsive full-width" src="../../components/gc-features/img/initiative-520x200.png" alt=""/>
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
</div>
</div>
</section>Evaluation and report
There is no evaluation and report available for this component.
Test cases
- Removed:
Provisional - Test-1: Promotional color theme
Page details
- Date modified: