Patch - GC Home Page: Reduced Doormats and added all services button (#…

…2434) * GC Home Page: Reduced Doormats and added all services button * Home: updating All services button styling --------- Co-authored-by: Marc-André Garneau <[email protected]>
wet-boew · Nov 5, 2024 · f315839 · f315839
1 parent 7215962
commit f315839
Show file tree

Hide file tree

Showing 5 changed files with 324 additions and 62 deletions.
diff --git a/templates/home/_base.scss b/templates/home/_base.scss
@@ -50,7 +50,6 @@
 		margin: 1em 0px;
 	}
 
-
 	/* Home page Most requested section
 	 *
 	 * Reference in:
@@ -77,4 +76,22 @@
 		background-repeat: no-repeat;
 		background-size: 38%;
 	}
+
+	// All services button under services and information
+	.gc-srvinfo .container > p:last-child {
+		margin-bottom: 20px;
+		margin-top: 20px;
+
+		.btn-all-services {
+			border: 2px solid $accent-blue; // #26374a
+			color: $accent-blue; // #26374a
+			font-size: 1.1em;
+			font-weight: bold;
+			padding: .65em 1.1em;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
 }
diff --git a/templates/home/api-en.html b/templates/home/api-en.html
@@ -45,7 +45,7 @@ <h3>Component list and latest version</h3>
 	<li><a href="#home-page-banner">Home page banner - Version 2.2</a></li>
 	<li><a href="#promotional-banner">Promotional banner - Version 2.0</a></li>
 	<li>Most requested - Version 1.0</li>
-	<li>Service and information - Version 1.0</li>
+	<li><a href="#services-information">Home page service and information - Version 2.0</a></li>
 	<li>Focus on - Version 1.0</li>
 	<li><a href="#your-government">Your government - Version 2.0</a></li>
 	<li><a href="#government-initiatives">Government initiatives - Version 2.0</a></li>
@@ -146,6 +146,150 @@ <h3 id="promotional-banner">Promotional banner</h3>
 &lt;/div&gt;
 </code></pre>
 
+<h3 id="services-information">Services and information</h3>
+<dl>
+	<dt>Version</dt>
+	<dd>2.0</dd>
+	<dt>Updated</dt>
+	<dd>2024-10-22</dd>
+	<dt>Notes</dt>
+	<dd>Services now limited to 9 with "All services" link.</dd>
+</dl>
+<pre><code>&lt;section class="gc-srvinfo">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Home page services and information&lt;/h2>
+		&lt;div class="wb-eqht row">
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
+				&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
+				&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
+				&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
+				&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
+				&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
+				&lt;p>Income tax, payroll, GST/HST,  contribution limits, tax credits, charities&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
+				&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
+				&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
+				&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
+			&lt;/div>
+		&lt;/div>
+		&lt;p>
+			&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>
+		&lt;/p>
+	&lt;/div>
+&lt;/section></code></pre>
+
+<h4>Previous version</h4>
+<details>
+	<summary>Version 1.0</summary>
+	<pre><code>&lt;section class="gc-srvinfo container">
+	&lt;h2 class="wb-inv">Services and information&lt;/h2>
+	&lt;div class="wb-eqht row">
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
+			&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
+			&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
+		&lt;/div>
+
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
+			&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
+			&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
+			&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
+			&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
+			&lt;p>Income tax, payroll, GST/HST,  contribution limits, tax credits, charities&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
+			&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/defence.html">National security and defence&lt;/a>&lt;/h3>
+			&lt;p>Military, transportation and cyber security, securing the border, counter-terrorism&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport&lt;/a>&lt;/h3>
+			&lt;p>Arts, media, heritage, official languages, national identity and funding&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies&lt;/a>&lt;/h3>
+			&lt;p>Safety, justice system, prepare for emergencies, services for victims of crime&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure&lt;/a>&lt;/h3>
+			&lt;p>Aviation, marine, road, rail, dangerous goods, infrastructure projects&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world&lt;/a>&lt;/h3>
+			&lt;p>Foreign policy, trade agreements, development work, global issues&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
+			&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/science.html">Science and innovation&lt;/a>&lt;/h3>
+			&lt;p>Scientific research on health, environment and space, grants and funding&lt;/p>
+		&lt;/div>
+	&lt;/div>
+&lt;/section></code></pre>
+</details>
+
+<h4>Transition from version 1.0 to version 2.0</h4>
+<ul>
+	<li>Remove the <code>container</code> class from the <code>&lt;section class="gc-srvinfo"></code> element.</li>
+	<li>Wrap the content inside the <code>&lt;section class="gc-srvinfo"></code> element with a <code>&lt;div class="container"></code> element.</li>
+	<li>Remove the following service and information elements:
+		<ul>
+			<li>National security and defence</li>
+			<li>Culture, history and sport</li>
+			<li>Policing, justice and emergencies</li>
+			<li>Transport and infrastructure</li>
+			<li>Canada and the world</li>
+			<li>Science and innovation</li>
+		</ul>
+	</li>
+	<li>Add the following paragraph right before the end of the <code>&lt;div class="container"></code>: <code>&lt;p>&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>&lt;/p></code></li>
+</ul>
+
 <h3 id="your-government">Your government</h3>
 <dl>
 	<dt>Version</dt>

diff --git a/templates/home/api-fr.html b/templates/home/api-fr.html
@@ -47,7 +47,7 @@ <h3>Component list and latest version</h3>
 		<li><a href="#home-page-banner">Home page banner - Version 2.2</a></li>
 		<li><a href="#promotional-banner">Promotional banner - Version 2.0</a></li>
 		<li>Most requested - Version 1.0</li>
-		<li>Service and information - Version 1.0</li>
+		<li><a href="#services-information">Home page service and information - Version 2.0</a></li>
 		<li>Focus on - Version 1.0</li>
 		<li><a href="#your-government">Your government - Version 2.0</a></li>
 		<li><a href="#government-initiatives">Government initiatives - Version 2.0</a></li>
@@ -148,6 +148,150 @@ <h3 id="promotional-banner">Promotional banner</h3>
 	&lt;/div&gt;
 	</code></pre>
 
+	<h3 id="services-information">Home page services and information</h3>
+	<dl>
+		<dt>Version</dt>
+		<dd>2.0</dd>
+		<dt>Updated</dt>
+		<dd>2024-10-22</dd>
+		<dt>Notes</dt>
+		<dd>Services now limited to 9 with "All services" link.</dd>
+	</dl>
+	<pre><code>&lt;section class="gc-srvinfo">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Services and information&lt;/h2>
+		&lt;div class="wb-eqht row">
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
+				&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
+				&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
+				&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
+				&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
+				&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
+				&lt;p>Income tax, payroll, GST/HST,  contribution limits, tax credits, charities&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
+				&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
+				&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
+			&lt;/div>
+			&lt;div class="col-lg-4 col-md-6">
+				&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
+				&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
+			&lt;/div>
+		&lt;/div>
+		&lt;p>
+			&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>
+		&lt;/p>
+	&lt;/div>
+&lt;/section></code></pre>
+
+	<h4>Previous version</h4>
+	<details>
+		<summary>Version 1.0</summary>
+		<pre><code>&lt;section class="gc-srvinfo container">
+	&lt;h2 class="wb-inv">Services and information&lt;/h2>
+	&lt;div class="wb-eqht row">
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/jobs.html">Jobs&lt;/a>&lt;/h3>
+			&lt;p>Find a job, training, hiring programs, work permits, Social Insurance Number (SIN)&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship&lt;/a>&lt;/h3>
+			&lt;p>Visit, work, study, immigrate, refugees, permanant residents, apply, check status&lt;/p>
+		&lt;/div>
+
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://travel.gc.ca">Travel and tourism&lt;/a>&lt;/h3>
+			&lt;p>In Canada or abroad, advice, advisories, passports, visit Canada, events, attractions&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/business.html">Business and industry&lt;/a>&lt;/h3>
+			&lt;p>Starting a business, permits, copyright, business support, selling to government&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/benefits.html">Benefits&lt;/a>&lt;/h3>
+			&lt;p>EI, family and sickness leave, pensions, housing, student aid, disabilities&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/health.html">Health&lt;/a>&lt;/h3>
+			&lt;p>Food, nutrition, diseases, vaccines, drugs, product safety and recalls&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/taxes.html">Taxes&lt;/a>&lt;/h3>
+			&lt;p>Income tax, payroll, GST/HST,  contribution limits, tax credits, charities&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/environment.html">Environment and natural resources&lt;/a>&lt;/h3>
+			&lt;p>Weather, climate, agriculture, wildlife, pollution, conservation, fisheries&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/defence.html">National security and defence&lt;/a>&lt;/h3>
+			&lt;p>Military, transportation and cyber security, securing the border, counter-terrorism&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/culture.html">Culture, history and sport&lt;/a>&lt;/h3>
+			&lt;p>Arts, media, heritage, official languages, national identity and funding&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies&lt;/a>&lt;/h3>
+			&lt;p>Safety, justice system, prepare for emergencies, services for victims of crime&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure&lt;/a>&lt;/h3>
+			&lt;p>Aviation, marine, road, rail, dangerous goods, infrastructure projects&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world&lt;/a>&lt;/h3>
+			&lt;p>Foreign policy, trade agreements, development work, global issues&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/finance.html">Money and finances&lt;/a>&lt;/h3>
+			&lt;p>Personal finance, credit reports, fraud protection, paying for education&lt;/p>
+		&lt;/div>
+		&lt;div class="col-lg-4 col-md-6">
+			&lt;h3>&lt;a href="https://www.canada.ca/en/services/science.html">Science and innovation&lt;/a>&lt;/h3>
+			&lt;p>Scientific research on health, environment and space, grants and funding&lt;/p>
+		&lt;/div>
+	&lt;/div>
+&lt;/section></code></pre>
+	</details>
+
+	<h4>Transition from version 1.0 to version 2.0</h4>
+	<ul>
+		<li>Remove the <code>container</code> class from the <code>&lt;section class="gc-srvinfo"></code> element.</li>
+		<li>Wrap the content inside the <code>&lt;section class="gc-srvinfo"></code> element with a <code>&lt;div class="container"></code> element.</li>
+		<li>Remove the following service and information elements:
+			<ul>
+				<li>National security and defence</li>
+				<li>Culture, history and sport</li>
+				<li>Policing, justice and emergencies</li>
+				<li>Transport and infrastructure</li>
+				<li>Canada and the world</li>
+				<li>Science and innovation</li>
+			</ul>
+		</li>
+		<li>Add the following paragraph right before the end of the <code>&lt;div class="container"></code>: <code>&lt;p>&lt;a class="btn btn-all-services" href="https://www.canada.ca/en/services.html">All services&lt;/a>&lt;/p></code></li>
+	</ul>
+
 	<h3 id="your-government">Your government</h3>
 	<dl>
 		<dt>Version</dt>