Home page - Meta information

Cette page n'est pas traduite.

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.0
Promotional banner - Version 2.0
Most requested - Version 1.0
Service and information - Version 1.0
Focus on - Version 1.0
Your government - Version 2.0
Government initiatives - Version 1.0

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 - Version 2.0

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-menu css class.

Previous versions

Version: 2.0
Updated: 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 intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.

Previous version

Version 1 - 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 intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.

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="provisional 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>

Previous version

Version 1.0 - 2018-12-27

<div class="home-banner">
			<div class="container">
				<div class="innerbox">
					<h1 property="name" id="wb-cont">Canada.ca</h1>
					<p>The official website of the Government of Canada</p>
				</div>
			</div>
			<div class="promo">
				<div class="container">
					<a class="figcaption" 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>

Provisional

Support for a set of predefined color to match the season. The intend is to set the color of the inner box with the site title to match the promotional banner background color.

The promotional color theme are set on the div.home-banner. Here the supported theme with their corresponding CSS class name

(default) Sky - sky
Earth - earth
Vegetation - vegetation
Night - night
Forest - forest
Autumn - autumn

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>

Evaluation and report

There is no evaluation and report available for this component.

Test cases

Removed: ~~Provisional - Test-1: Promotional color theme~~

Détails de la page

Date de modification :: 2022-09-21

Sélection de la langue

Recherche

Home page - Meta information

Technical specification

Component list and latest version

Home page menu

Previous version

Home page header

List of changes

Previous versions

Home page banner

Previous version

Promotional banner

Previous version

Provisional

Your government

Previous version

Evaluation and report

Test cases

Détails de la page