Streched link: Example fix and more documentation

wet-boew · Jul 5, 2019 · 17b30fa · 17b30fa
1 parent a9068ea
commit 17b30fa
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/site/pages/experimental-en.hbs b/site/pages/experimental-en.hbs
@@ -226,18 +226,19 @@ if ( s.getTime() &lt; msT && msT &lt; e.getTime() ) {
 </div>
 
 <h3 id="stretched-link">Features section with stretched links</h3>
-<div class="row wb-eqht">
+<p>In the following example, adding the <code>.stretched-link</code> class to the hyperlink found inside the <code>&lt;h3&gt;</code> tag will result in propagating the clickable area all the way up to the parent <code>&lt;div&gt;</code> with the <code>.col-xy-z</code> class because it has a "relative" position.</p>
+<div class="row wb-eqht experimental">
 	<div class="col-sm-6">
 		<div class="well well-sm brdr-rds-0 eqht-trgt">
 			<img class="img-responsive full-width" src="https://www.canada.ca/content/dam/canada/activities/20190603-1-520x200.jpg" alt="">
-			<h3 class="h5"><a class="stretched-link" href="https://www.ic.gc.ca/eic/site/062.nsf/eng/h_00108.html?open&amp;WT.mc_id=DigitalCharter_canada.ca-home_activities-initiatives_en" data-gc-analytics="promo:promotionalfeature">Learn more about Canada’s Digital Charter</a></h3>
+			<h3 class="h5"><a class="stretched-link" href="https://www.ic.gc.ca/eic/site/062.nsf/eng/h_00108.html">Learn more about Canada’s Digital Charter</a></h3>
 			<p>Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.</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="https://www.canada.ca/content/dam/canada/activities/20190604-1-520x200.jpg" alt="">
-			<h3 class="h5"><a class="stretched-link" href="https://www.rcaanc-cirnac.gc.ca/eng/1466616436543/1534874922512" data-gc-analytics="promo:promotionalfeature">National Indigenous History Month</a></h3>
+			<h3 class="h5"><a class="stretched-link" href="https://www.rcaanc-cirnac.gc.ca/eng/1466616436543/1534874922512">National Indigenous History Month</a></h3>
 			<p>Celebrate National Indigenous History Month in June</p>
 		</div>
 	</div>

diff --git a/site/pages/experimental-fr.hbs b/site/pages/experimental-fr.hbs
@@ -121,7 +121,7 @@
 	</tr>
 	<tr lang="en">
 		<th>CSS <code>.stretched-link</code></th>
-		<td>Propagates the clickable area around an hyperlink tag up to a relatively positioned parent.</td>
+		<td>Répand la zone cliquable d'une balise hyperlien jusqu'au premier élément parent qui est de position relative.</td>
 		<td>v5.1</td>
 		<td></td>
 	</tr>
@@ -227,18 +227,19 @@ if ( s.getTime() &lt; msT && msT &lt; e.getTime() ) {
 </div>
 
 <h3 id="stretched-link">Features section with stretched links</h3>
-<div class="row wb-eqht">
+<p>Dans l'exemple suivant, ajouter la classe <code>.stretched-link</code> à l'hyperlien situé à l'intérieur de la balise <code>&lt;h3&gt;</code> résulera en une propagation de la zone cliquable jusqu'au <code>&lt;div&gt;</code> parent qui contient la classe <code>.col-xy-z</code> parce que celui-ci est en position &laquo;&nbsp;relative&nbsp;&raquo;.</p>
+<div class="row wb-eqht experimental">
 	<div class="col-sm-6">
 		<div class="well well-sm brdr-rds-0 eqht-trgt">
 			<img class="img-responsive full-width" src="https://www.canada.ca/content/dam/canada/activities/20190603-1-520x200.jpg" alt="">
-			<h3 class="h5"><a class="stretched-link" href="https://www.ic.gc.ca/eic/site/062.nsf/eng/h_00108.html?open&amp;WT.mc_id=DigitalCharter_canada.ca-home_activities-initiatives_en" data-gc-analytics="promo:promotionalfeature">Learn more about Canada’s Digital Charter</a></h3>
+			<h3 class="h5"><a class="stretched-link" href="https://www.ic.gc.ca/eic/site/062.nsf/eng/h_00108.html">Learn more about Canada’s Digital Charter</a></h3>
 			<p>Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.</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="https://www.canada.ca/content/dam/canada/activities/20190604-1-520x200.jpg" alt="">
-			<h3 class="h5"><a class="stretched-link" href="https://www.rcaanc-cirnac.gc.ca/eng/1466616436543/1534874922512" data-gc-analytics="promo:promotionalfeature">National Indigenous History Month</a></h3>
+			<h3 class="h5"><a class="stretched-link" href="https://www.rcaanc-cirnac.gc.ca/eng/1466616436543/1534874922512">National Indigenous History Month</a></h3>
 			<p>Celebrate National Indigenous History Month in June</p>
 		</div>
 	</div>