Patch - All services: Adding .colcount-no-break to lists documentation (#2640)

Author: tristandasilva

_data/templates.json

@@ -99,10 +99,10 @@
 		"en": "All services page template.",
 		"fr": "Gabarit de page pour tous les services."
 	},
-	"modified": "2025-07-24",
+	"modified": "2025-08-29",
 	"componentName": "all-services",
 	"status": "stable",
-	"version": "1.2",
+	"version": "1.3",
 	"pages": {
 		"examples": [
 			{
@@ -141,7 +141,7 @@
 				"en": "All services page template.",
 				"fr": "Gabarit de page pour tous les services."
 			},
-			"iteration": "_:iteration_allservices_3",
+			"iteration": "_:iteration_allservices_4",
 			"example": [
 				{
 					"en": { "href": "all-services-en.html", "text": "All services" },
@@ -152,6 +152,10 @@
 				"_:implement_allservices"
 			],
 			"history": [
+				{
+					"en": "August 2025 - Use the class \".colcount-no-break\" to prevent list items from splitting across multiple columns.",
+					"fr": "Août 2025 - Utilisation de la classe « .colcount-no-break » pour empêcher les éléments de liste de se diviser en plusieurs colonnes."
+				},
 				{
 					"en": "July 2025 - Remove expand and collapse All buttons.",
 					"fr": "Juillet 2025 - Suppression des boutons « Développer » et « Réduire »."
@@ -166,7 +170,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_allservices",
-			"iteration": "_:iteration_allservices_3",
+			"iteration": "_:iteration_allservices_4",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -191,14 +195,22 @@
 		}
 	],
 	"iteration": [
+		{
+			"@id": "_:iteration_allservices_4",
+			"name": "All services page - Iteration 4",
+			"date": "2025-08",
+			"additions": [ "Use the class \".colcount-no-break\" to prevent list items from splitting across multiple columns." ],
+			"detectableBy": "Three navigation bands each whose list container has the class \".colcount-no-break\" followed by a Services and Information component containing a list of all themes and topics.",
+			"predecessor": "_:iteration_allservices_3"
+		},
 		{
 			"@id": "_:iteration_allservices_3",
 			"name": "All services page - Iteration 3",
 			"date": "2025-07",
 			"additions": [ "Removing expand/collapse all buttons." ],
 			"detectableBy": "Three navigation bands followed by a Services and Information component containing a list of all themes and topics.",
 			"predecessor": "_:iteration_allservices_2",
-			"successor": "_:iteration_allservices_3"
+			"successor": "_:iteration_allservices_4"
 		},
 		{
 			"@id": "_:iteration_allservices_2",

common/list/lists-en.html

@@ -3,7 +3,7 @@
 	"title": "Lists",
 	"language": "en",
 	"altLangPage": "lists-fr.html",
-	"dateModified": "2023-03-05"
+	"dateModified": "2025-08-29"
 }
 ---
 <div class="wb-prettify all-pre"></div>
@@ -313,6 +313,87 @@ <h3> Appearance − Multi-class</h3>
 &lt;li&gt;Item 8&lt;/li&gt;
 &lt;/ul&gt;</code></pre>
 
+<h3><code>.colcount-no-break</code></h3><div></div>
+<p>Prevents list items from splitting across multiple list columns.</p>
+<h4>Unordered list</h4>
+<h5>Working example</h5>
+<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
+<li>Item 1<br>Line 2<br>Line 3</li>
+<li>Item 2<br>Line 2<br>Line 3</li>
+<li>Item 3</li>
+<li>Item 4<br>Line 2<br>Line 3</li>
+<li>Item 5<br>Line 2<br>Line 3</li>
+<li>Item 6<br>Line 2</li>
+<li>Item 7<br>Line 2</li>
+<li>Item 8</li>
+</ul>
+<h5>code</h5>
+<pre><code><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break"</span><span class="tag">&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 1</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 4</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 5</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 6</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 7</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+	</span><span class="tag">&lt;li&gt;</span><span class="pln">Item 8</span><span class="tag">&lt;/li&gt;</span><span class="pln">
+</span><span class="tag">&lt;/ul&gt;</span></code></pre>
+<h4>Description list</h4>
+<h5>Working example</h5>
+<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
+<div>
+<dt>Term 1</dt>
+<dd>Description</dd>
+</div>
+<div>
+<dt>Term 2</dt>
+<dd>Description<br>Line 2<br>Line 3</dd>
+</div>
+<div>
+<dt>Term 3</dt>
+<dd>Description<br>Line 2<br>Line 3</dd>
+</div>
+<div>
+<dt>Term 4</dt>
+<dd>Description<br>Line 2</dd>
+</div>
+<div>
+<dt>Term 5</dt>
+<dd>Description<br>Line 2</dd>
+</div>
+<div>
+<dt>Term 6</dt>
+<dd>Description</dd>
+</div>
+</dl>
+<h5>code</h5>
+<pre><code><span class="tag">&lt;dl</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break"</span><span class="tag">&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 1</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 2</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 3</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 3</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 4</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 5</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;br&gt;</span><span class="pln">Line 2</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+	</span><span class="tag">&lt;div&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dt&gt;</span><span class="pln">Term 6</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
+		</span><span class="tag">&lt;dd&gt;</span><span class="pln">Description</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
+	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
+</span><span class="tag">&lt;/dl&gt;</span></code></pre>
+
 <h2>Responsive list <code>.list-responsive</code></h2>
 <ul class="wb-eqht list-unstyled mrgn-tp-md mrgn-bttm-sm lst-spcd-2 list-responsive">
 	<li>Item</li>