diff --git a/_data/components.json b/_data/components.json
index 64dc2a214d..54599d78de 100644
--- a/_data/components.json
+++ b/_data/components.json
@@ -272,25 +272,38 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Featured link - Documentation and working example",
-		"fr": "Lien en vedette - Documentation et example pratique"
+		"en": "Featured link",
+		"fr": "Lien en vedette"
 	},
 	"description": {
 		"en": "This adds a featured link to a page that your institution needs to feature prominently.",
 		"fr": "Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence."
 	},
-	"modified": "2021-05-20",
+	"modified": "2024-02-21",
 	"componentName": "gc-featured-link",
-	"status": "provisional",
+	"status": "stable",
+	"version": "1.0.0",
 	"pages": {
+		"docs": [
+			{
+				"title": "Featured link",
+				"language": "en",
+				"path": "gc-featured-link-doc-en.html"
+			},
+			{
+				"title": "Lien en vedette",
+				"language": "fr",
+				"path": "gc-featured-link-doc-fr.html"
+			}
+		],
 		"examples": [
 			{
-				"title": "Featured link - Documentation and working example",
+				"title": "Featured link",
 				"language": "en",
 				"path": "gc-featured-link-en.html"
 			},
-		{
-				"title": "Lien en vedette - Documentation et example pratique",
+			{
+				"title": "Lien en vedette",
 				"language": "fr",
 				"path": "gc-featured-link-fr.html"
 			}
@@ -317,7 +330,235 @@
 				"path": "reports/a11y-2-fr.html"
 			}
 		]
-	}
+	},
+	"dependencies": "No dependency.",
+	"a11yGuidance": "No accessibility guidance.",
+	"variations": [
+		{
+			"name": {
+				"en": "Featured link - default",
+				"fr": "Lien en vedette - par défaut"
+			},
+			"status": "stable",
+			"description": {
+				"en": "This adds a featured link to a page that your institution needs to feature prominently.",
+				"fr": "Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence."
+			},
+			"iteration": "_:iteration_featuredLink_3",
+			"example": [
+				{
+					"en": { "href": "gc-featured-link-en.html", "text": "Featured link" },
+					"fr": { "href": "gc-featured-link-fr.html", "text": "Lien en vedette" }
+				}
+			],
+			"implementation": [
+				"_:implement_featuredLink",
+				"_:implement_migrationProvisional"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Stabilizing component.",
+					"fr": "Mars 2024 - Stabilisation de la composante."
+				},
+				{
+					"en": "August 2023 - Adding possibility to customize the background color.",
+					"fr": "Août 2023 - Ajout de la possibilité de personnaliser la couleur de fond."
+				},
+				{
+					"en": "June 2021 - Initial provisional implementation to gather user experience data.",
+					"fr": "Juin 2021 - Implémentation provisoire initiale pour recueillir des données sur l'expérience utilisateur."
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_featuredLink",
+			"iteration": "_:iteration_featuredLink_3",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the component manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
+			},
+			"instructions": {
+				"en": [
+					"Refer to the following code sample.",
+					"You can optionally add a description under the featured link.",
+					"To customize the background color, add the attribute <code>data-bg-color</code> to the <code>&lt;section></code> element. The value should be the hexadecimal code of the desired color, for example: <code>#005B61</code>."
+				],
+				"fr": [
+					"Référez-vous au code qui suit.",
+					"Vous pouvez facultativement ajouter une description sous le lien en vedette.",
+					"Pour personnaliser la couleur d'arrière-plan, ajoutez l'attribut <code>data-bg-color</code> à l'élément <code>&lt;section></code>. La valeur doit être le code hexadécimal de la couleur souhaitée, par exemple&nbsp;: <code>#005B61</code>."
+				]
+			},
+			"notes": {
+				"en": [
+					"When customizing the background color, the component will automatically apply the correct color to the text: <code>#FFFFFF</code> for dark colors, <code>#333333</code> for light colors, <code>#000000</code> for colors in-between."
+				],
+				"fr": [
+					"Lorsque la couleur de fond est personnalisée, la composante appliquera automatiquement la bonne couleur au texte : <code>#FFFFFF</code> pour les couleurs sombres, <code>#333333</code> pour les couleurs claires, <code>#000000</code> pour les couleurs intermédiaires."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<section class=\"gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<section class=\"gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Pleins feux sur</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t</div>\n</section>"
+					}
+				]
+			}
+		},
+		{
+			"@id": "_:implement_migrationProvisional",
+			"iteration": "_:iteration_featuredLink_3",
+			"name": {
+				"en": "Migration from provisional to stable v1.0.0",
+				"fr": "Migration de provisoire à stable v1.0.0"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers attempting to update the component from its provisional state to its stable state version 1.0.0.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs tentant de mettre à jour la composante à partir de l'état provoire vers l'état stable version 1.0.0."
+			},
+			"instructions": {
+				"en": [
+					"Remove the CSS class \"provisional\".",
+					"Remove the starting and end tags for both <code>&lt;div class=\"row\">&lt;/div></code> and <code>&lt;div class=\"col-xs-12\">&lt;/div></code>.",
+					"Update the <code>&lt;h2 class=\"wb-inv\"></code> title to \"Spotlight on\"."
+				],
+				"fr": [
+					"Supprimer la classe CSS \"provisoire\".",
+					"Supprimez les balises de début et de fin pour <code>&lt;div class=\"row\">&lt;/div></code> et <code>&lt;div class=\"col-xs-12\" >&lt;/div></code>.",
+					"Mettez à jour le titre <code>&lt;h2 class=\"wb-inv\"></code> à \"Pleins feux sur\"."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code before:",
+						"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+					},
+					{
+						"@type": "source-code",
+						"description": "Code after:",
+						"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Code avant :",
+						"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">En vedette</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+					},
+					{
+						"@type": "source-code",
+						"description": "Code après :",
+						"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Pleins feux sur</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t</div>\n</section>"
+					}
+				]
+			}
+		}
+	],
+	"iteration": [
+		{
+			"@id": "_:iteration_featuredLink_3",
+			"name": "Featured link - Iteration 3",
+			"date": "2024-03",
+			"detectableBy": ".gc-featured-link:not(.provisional)",
+			"breaking": [
+				"Removed unnecessary grid",
+				"Changed hidden heading"
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLink_2",
+			"name": "Featured link - Iteration 2",
+			"date": "2023-08",
+			"detectableBy": ".provisional.gc-featured-link[data-bg-color]",
+			"additions": [
+				"Adding possibility to customize the background color."
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"provisional gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLink_1",
+			"name": "Featured link - Iteration 1",
+			"date": "2021-06",
+			"detectableBy": ".provisional.gc-featured-link",
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLinkHelpers_1",
+			"name": "Featured link with helpers - Iteration 1",
+			"date": "unknown",
+			"detectableBy": ".bg-gctheme.opct-90 a.stretched-link",
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<div class=\"bg-gctheme opct-90\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"mrgn-tp-md mrgn-bttm-md col-xs-12\">\n\t\t\t\t<p class=\"pull-left text-white mrgn-bttm-0\">Featured: </p>\n\t\t\t\t<p class=\"pull-left mrgn-bttm-0\"><a class=\"stretched-link text-white\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+				}
+			]
+		}
+	],
+	"changesets": [
+		{
+			"@id": "_:cs_featuredLink",
+			"name": "Featured link",
+			"status": "stable",
+			"baseOnIteration": "_:iteration_featuredLink_1",
+			"detectableBy": ".gc-featured-link",
+			"layout": "Component spans across viewport width, link spans across container width.",
+			"semantic": "section>h2+a",
+			"style": "By default, the background color of the component is blue with white text.",
+			"static": [
+				"Featured",
+				"En vedette"
+			],
+			"schema": [
+				"Link title (type: STRING)",
+				"Link URL (type: STRING)",
+				"Link description (type: STRING)",
+				"Background color (type: STRING) - optional"
+			],
+			"configuration": "data-bg-color: customize the background color"
+		}
+	]
 }
 ,{
 	"@context": {
diff --git a/components/gc-featured-link/_base.scss b/components/gc-featured-link/_base.scss
index 7944f0b7c1..f88eb8c82b 100644
--- a/components/gc-featured-link/_base.scss
+++ b/components/gc-featured-link/_base.scss
@@ -1,4 +1,4 @@
-/* Provisional featured link component */
+/* featured link component */
 
 .gc-featured-link {
 	background-color: $bg-gctheme;
@@ -7,8 +7,9 @@
 	opacity: .9;
 	padding-bottom: $space-md;
 	padding-top: $space-md;
+	position: relative;
 
-	p:first-of-type {
+	p {
 		margin-bottom: $space-0;
 	}
 
diff --git a/components/gc-featured-link/gc-featured-link-doc-en.html b/components/gc-featured-link/gc-featured-link-doc-en.html
new file mode 100644
index 0000000000..c4260f6676
--- /dev/null
+++ b/components/gc-featured-link/gc-featured-link-doc-en.html
@@ -0,0 +1,9 @@
+---
+title: Featured link
+description: Documentation for the Featured link component
+language: en
+altLangPage: gc-featured-link-doc-fr.html
+dateModified: 2024-03-08
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/components/gc-featured-link/gc-featured-link-doc-fr.html b/components/gc-featured-link/gc-featured-link-doc-fr.html
new file mode 100644
index 0000000000..3c477e2f45
--- /dev/null
+++ b/components/gc-featured-link/gc-featured-link-doc-fr.html
@@ -0,0 +1,9 @@
+---
+title: Lien en vedette
+description: Documentation pour la composante Lien en vedette
+language: fr
+altLangPage: gc-featured-link-doc-en.html
+dateModified: 2024-03-08
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/components/gc-featured-link/gc-featured-link-en.html b/components/gc-featured-link/gc-featured-link-en.html
index cfa1493528..cf4ee10a88 100644
--- a/components/gc-featured-link/gc-featured-link-en.html
+++ b/components/gc-featured-link/gc-featured-link-en.html
@@ -1,84 +1,61 @@
 ---
-title: Featured link
-description: Documentation and working example for the featured link - provisional feature
-language: en
-altLangPage: gc-featured-link-fr.html
-dateModified: 2021-07-07
-layout: no-container
+{
+	"title": Featured link,
+	"description": Working examples for the Featured link component,
+	"language": en,
+	"altLangPage": gc-featured-link-fr.html,
+	"dateModified": 2024-03-08,
+	"breadcrumbs": [
+		{ "title": "Featured link - Documentation", "link": "components/gc-featured-link/gc-featured-link-doc-en.html" }
+	],
+	"layout": no-container
+}
 ---
+<span class="wb-prettify all-pre hide"></span>
+
 <div class="container">
-	<h1>{{ page.title }}</h1>
-
-	{% include alert-provisional.html %}
-
-	<span class="wb-prettify all-pre hide"></span>
-
-	<dl class="horizontal">
-		<dt>Status</dt>
-		<dd>Provisional</dd>
-		<dt>Type</dt>
-		<dd>Canada.ca design pattern</dd>
-		<dt>Last review</dt>
-		<dd>2021-07-07</dd>
-		<dt>Conforming to</dt>
-		<dd>Content and IA Specification - Version 2.1.2</dd>
-		<dt>Guidance</dt>
-		<dd>n/a</dd>
-		<dt>Technical name</dt>
-		<dd><code>gc-featured-link</code></dd>
-	</dl>
-
-	<h2>Purpose</h2>
-	<p>This adds a featured link to a page that your institution needs to feature prominently. It should be used to bring attention to warnings or notices.</p>
-
-	<h2>Working examples</h2>
-
-	<h3>Featured link (provisional v1.0)</h3>
-	<p>The logic semantic structure of headings have not been followed to accommodate the following working example. You can go directly to the <a href="#codeSample1">source code</a>.</p>
+	<h1 id="wb-cont" property="name">{{ page.title }}</h1>
+	<p>Below are working examples for the "Featured link" component.</p>
+
+	<section class="alert alert-info mrgn-tp-lg">
+		<h2 class="h3">Headings structure</h2>
+		<p>The logic semantic structure of headings have not been followed to accommodate the following working examples.</p>
+	</section>
+
+	<h2>On this page</h2>
+	<ul>
+		<li><a href="#defaultExample">Default example</a></li>
+		<li><a href="#customBackgroundExample">Customized background color examples</a></li>
+		<li><a href="#linkBelowExample">Example with featured link description below the link</a></li>
+	</ul>
+
+	<h2 id="defaultExample">Default example</h2>
 </div>
 
-<section class="provisional gc-featured-link">
+<section class="gc-featured-link">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">Featured</h2>
-				<p><a class="stretched-link" href="#">[Promotion title]</a></p>
-				<p>Long description [Optional]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Spotlight on</h2>
+		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
 	</div>
 </section>
 
 <div class="container">
-	<h4 id="codeSample1">Code</h4>
-	<pre><code>&lt;section class="provisional gc-featured-link"&gt;
+	<h3 id="codeSample1">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link"&gt;
 	&lt;div class="container"&gt;
-		&lt;div class="row"&gt;
-			&lt;div class="col-xs-12"&gt;
-				&lt;h2 class="wb-inv"&gt;Featured&lt;/h2&gt;
-				&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
-				&lt;p&gt;Long description [optional]&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
+		&lt;h2 class="wb-inv"&gt;Spotlight on&lt;/h2&gt;
+		&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
 	&lt;/div&gt;
 &lt;/section&gt;</code></pre>
 
-	<h3>Customized background color</h3>
-	<p>To customize the background color, add the attribute <code>data-bg-color</code>. The value should be the hexadecimal code of the desired color.</p>
-	<p>The plugin will automatically apply the correct color to the text: <code>#FFFFFF</code> for dark colors, <code>#333333</code> for light colors, <code>#000000</code> for colors in-between.</p>
-	<p>The logic semantic structure of headings have not been followed to accommodate each working examples. You can go directly to the <a href="#codeSample2">source code</a>.</p>
+	<h2 id="customBackgroundExample">Customized background color examples</h2>
 	<p class="mrgn-tp-lg">Dark background example:</p>
 </div>
 
-<section class="provisional gc-featured-link" data-bg-color="#005B61">
+<section class="gc-featured-link" data-bg-color="#005B61">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">Featured</h2>
-				<p><a class="stretched-link" href="#">[Promotion title]</a></p>
-				<p>Long description [Optional]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Spotlight on</h2>
+		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
 	</div>
 </section>
 
@@ -86,15 +63,10 @@ <h2 class="wb-inv">Featured</h2>
 	<p class="mrgn-tp-lg">Light color example:</p>
 </div>
 
-<section class="provisional gc-featured-link" data-bg-color="#99dade">
+<section class="gc-featured-link" data-bg-color="#99dade">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">Featured</h2>
-				<p><a class="stretched-link" href="#">[Promotion title]</a></p>
-				<p>Long description [Optional]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Spotlight on</h2>
+		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
 	</div>
 </section>
 
@@ -102,99 +74,54 @@ <h2 class="wb-inv">Featured</h2>
 	<p class="mrgn-tp-lg">Medium color example:</p>
 </div>
 
-<section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
+<section class="gc-featured-link" data-bg-color="#8F8F8F">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">Featured</h2>
-				<p><a class="stretched-link" href="#">[Promotion title]</a></p>
-				<p>Long description [Optional]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Spotlight on</h2>
+		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
 	</div>
 </section>
 
 <div class="container">
-	<h4 id="codeSample2">Code</h4>
-	<pre><code>&lt;section class="provisional gc-featured-link" data-bg-color="#005B61">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">Featured&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
-					&lt;p>Long description [Optional]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section>
-
-	&lt;section class="provisional gc-featured-link" data-bg-color="#99dade">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">Featured&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
-					&lt;p>Long description [Optional]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section>
-
-	&lt;section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">Featured&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
-					&lt;p>Long description [Optional]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section></code></pre>
-
-	<h3>Previous design patterns</h3>
-	<details>
-		<summary>Previous pattern (Home page)</summary>
-		<p>Pattern using helpers:</p>
-		<div class="bg-gctheme opct-90">
-			<div class="container">
-				<div class="row">
-					<div class="mrgn-tp-md mrgn-bttm-md col-xs-12">
-						<p class="pull-left text-white mrgn-bttm-0">Featured:&nbsp;</p>
-						<p class="pull-left mrgn-bttm-0"><a class="stretched-link text-white" href="#">[Promotion title]</a></p>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<pre><code>&lt;div class="bg-gctheme opct-90"&gt;
-			&lt;div class="container"&gt;
-				&lt;div class="row"&gt;
-					&lt;div class="mrgn-tp-md mrgn-bttm-md col-xs-12"&gt;
-						&lt;p class="pull-left text-white mrgn-bttm-0"&gt;Featured:&nbsp;&lt;/p&gt;
-						&lt;p class="pull-left mrgn-bttm-0"&gt;&lt;a class="stretched-link text-white" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
-					&lt;/div&gt;
-				&lt;/div&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-		</code></pre>
-	</details>
-
-	<div lang="en">
-	<h2>Evaluation and report</h2>
-	<ul>
-		<li>Accessibility pre-assessment #1
-			<ul>
-				<li><a href="./reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment report #1</span> English report</a></li>
-				<li><a href="./reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment report #1</span> French report</a></li>
-			</ul>
-		</li>
-		<li>Accessibility assessment #1
-			<ul>
-				<li><a href="./reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment report #1</span> English report</a></li>
-				<li><a href="./reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment report #1</span> French report</a></li>
-			</ul>
-		</li>
-	</ul>
+	<h3 id="codeSample2">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link" data-bg-color="#005B61">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Spotlight on&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section>
+
+&lt;section class="gc-featured-link" data-bg-color="#99dade">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Spotlight on&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section>
+
+&lt;section class="gc-featured-link" data-bg-color="#8F8F8F">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Spotlight on&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section></code></pre>
+
+	<h2 id="linkBelowExample">Example with featured link description below the link</h2>
 </div>
+
+<section class="gc-featured-link">
+	<div class="container">
+		<h2 class="wb-inv">Spotlight on</h2>
+		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
+		<p>Long description [optional]</p>
+	</div>
+</section>
+
+<div class="container">
+	<h3 id="codeSample3">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link"&gt;
+	&lt;div class="container"&gt;
+		&lt;h2 class="wb-inv"&gt;Spotlight on&lt;/h2&gt;
+		&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
+		&lt;p&gt;Long description [Optional]&lt;/p&gt;
+	&lt;/div&gt;
+&lt;/section&gt;</code></pre>
 </div>
diff --git a/components/gc-featured-link/gc-featured-link-fr.html b/components/gc-featured-link/gc-featured-link-fr.html
index e53de9e01d..ecbda7d059 100644
--- a/components/gc-featured-link/gc-featured-link-fr.html
+++ b/components/gc-featured-link/gc-featured-link-fr.html
@@ -1,84 +1,61 @@
 ---
-title: Lien en vedette
-description: Documentation et exemple pratique de lien en vedette - fonctionnalité provisoire
-language: fr
-altLangPage: gc-featured-link-en.html
-dateModified: 2021-07-07
-layout: no-container
+{
+	"title": Lien en vedette,
+	"description": Exemples pratiques de la composante Lien en vedette,
+	"language": fr,
+	"altLangPage": gc-featured-link-en.html,
+	"dateModified": 2024-03-08,
+	"breadcrumbs": [
+		{ "title": "Lien en vedette - Documentation", "link": "components/gc-featured-link/gc-featured-link-doc-fr.html" }
+	],
+	"layout": no-container
+}
 ---
+<span class="wb-prettify all-pre hide"></span>
+
 <div class="container">
-	<h1>{{ page.title }}</h1>
-
-	{% include alert-provisional.html %}
-
-	<span class="wb-prettify all-pre hide"></span>
-
-	<dl class="horizontal">
-		<dt>Statut</dt>
-		<dd>Provisoire</dd>
-		<dt>Type</dt>
-		<dd>Conception de Canada.ca</dd>
-		<dt>Dernière revue</dt>
-		<dd>2021-07-07</dd>
-		<dt>Est conforme à</dt>
-		<dd>Spécifications du contenu et de l'architecture de l'information 2.1.2</dd>
-		<dt>Directives</dt>
-		<dd>n/a</dd>
-		<dt>Nom technique</dt>
-		<dd><code>gc-featured-link</code></dd>
-	</dl>
-
-	<h2>Objectif</h2>
-	<p>Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence. Il doit être utilisé pour attirer l'attention sur les avertissements ou les avis.</p>
-
-	<h2>Exemples pratiques</h2>
-
-	<h3>Lien en vedette (Provisiore v1.0)</h3>
-	<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à l'exemple pratique suivant. Vous pouvez aller directement au <a href="#codeSample1">code source</a>.</p>
+	<h1 id="wb-cont" property="name">{{ page.title }}</h1>
+	<p>Vous trouverez ci-dessous des exemples pratiques pour la composante « Lien en vedette ».</p>
+
+	<section class="alert alert-info mrgn-tp-lg">
+		<h2 class="h3">Structure des en-têtes</h2>
+		<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter aux exemples pratiques suivants.</p>
+	</section>
+
+	<h2>Sur cette page</h2>
+	<ul>
+		<li><a href="#exempleParDefaut">Exemple par défaut</a></li>
+		<li><a href="#arrierePlanPersonnalise">Exemple avec couleur d'arrière-plan personnalisée</a></li>
+		<li><a href="#descriptionSousLien">Exemple de lien en vedette avec description sous le lien</a></li>
+	</ul>
+
+	<h2 id="exempleParDefaut">Exemple par défaut</h2>
 </div>
 
-<section class="provisional gc-featured-link">
+<section class="gc-featured-link">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">En vedette</h2>
-				<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
-				<p>Description longue [Facultatif]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Pleins feux sur</h2>
+		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
 	</div>
 </section>
 
 <div class="container">
-	<h4 id="codeSample1">Code</h4>
-	<pre><code>&lt;section class="provisional gc-featured-link">
+	<h3 id="codeSample1">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link">
 	&lt;div class="container">
-		&lt;div class="row">
-			&lt;div class="col-xs-12">
-				&lt;h2 class="wb-inv">En vedette&lt;/h2>
-				&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
-				&lt;p>Description longue [Facultatif]&lt;/p>
-			&lt;/div>
-		&lt;/div>
+		&lt;h2 class="wb-inv">Pleins feux sur&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
 	&lt;/div>
 &lt;/section></code></pre>
 
-		<h3>Couleur d'arrière-plan personnalisée</h3>
-		<p>Pour personnaliser la couleur d'arrière-pla, ajoutez l'attribut <code>data-bg-color</code>. La valeur doit être le code hexadécimal de la couleur souhaitée.</p>
-		<p>Le plugiciel appliquera automatiquement la bonne couleur au texte&nbsp;: <code>#FFFFFF</code> pour les couleurs sombres, <code>#333333</code> pour les couleurs claires, <code>#000000</code> pour les couleurs intermédiaires.</p>
-		<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à chaque exemples pratiques. Vous pouvez aller directement au <a href="#codeSample2">code source</a>.</p>
-		<p class="mrgn-tp-lg">Exemple avec couleur sombre&nbsp;:</p>
-	</div>
+	<h2 id="arrierePlanPersonnalise">Exemple avec couleur d'arrière-plan personnalisée</h2>
+	<p class="mrgn-tp-lg">Exemple avec couleur sombre&nbsp;:</p>
+</div>
 
-<section class="provisional gc-featured-link" data-bg-color="#005B61">
+<section class="gc-featured-link" data-bg-color="#005B61">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">En vedette</h2>
-				<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
-				<p>Description longue [Facultatif]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Pleins feux sur</h2>
+		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
 	</div>
 </section>
 
@@ -86,15 +63,10 @@ <h2 class="wb-inv">En vedette</h2>
 	<p class="mrgn-tp-lg">Exemple avec couleur claire&nbsp;:</p>
 </div>
 
-<section class="provisional gc-featured-link" data-bg-color="#99dade">
+<section class="gc-featured-link" data-bg-color="#99dade">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">En vedette</h2>
-				<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
-				<p>Description longue [Facultatif]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Pleins feux sur</h2>
+		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
 	</div>
 </section>
 
@@ -102,99 +74,54 @@ <h2 class="wb-inv">En vedette</h2>
 	<p class="mrgn-tp-lg">Exemple avec couleur intermédiaire&nbsp;:</p>
 </div>
 
-<section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
+<section class="gc-featured-link" data-bg-color="#8F8F8F">
 	<div class="container">
-		<div class="row">
-			<div class="col-xs-12">
-				<h2 class="wb-inv">En vedette</h2>
-				<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
-				<p>Description longue [Facultatif]</p>
-			</div>
-		</div>
+		<h2 class="wb-inv">Pleins feux sur</h2>
+		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
 	</div>
 </section>
 
 <div class="container">
-	<h4 id="codeSample2">Code</h4>
-	<pre><code>&lt;section class="provisional gc-featured-link" data-bg-color="#005B61">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">En vedette&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
-					&lt;p>Description longue [Facultatif]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section>
-
-	&lt;section class="provisional gc-featured-link" data-bg-color="#99dade">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">En vedette&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
-					&lt;p>Description longue [Facultatif]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section>
-
-	&lt;section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
-		&lt;div class="container">
-			&lt;div class="row">
-				&lt;div class="col-xs-12">
-					&lt;h2 class="wb-inv">En vedette&lt;/h2>
-					&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
-					&lt;p>Description longue [Facultatif]&lt;/p>
-				&lt;/div>
-			&lt;/div>
-		&lt;/div>
-	&lt;/section></code></pre>
-
-	<h3>Modèles de conception précédents</h3>
-	<details>
-		<summary>Modèle précédent (Page d'accueil)</summary>
-		<p>Modèle utilisant les "helpers":</p>
-		<div class="bg-gctheme opct-90">
-			<div class="container">
-				<div class="row">
-					<div class="mrgn-tp-md mrgn-bttm-md col-xs-12">
-						<p class="pull-left text-white mrgn-bttm-0">En vedette&nbsp;:&nbsp;</p>
-						<p class="pull-left mrgn-bttm-0"><a class="stretched-link text-white" href="#">[Titre de la promotion]</a></p>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<pre><code>&lt;div class="bg-gctheme opct-90"&gt;
-			&lt;div class="container"&gt;
-				&lt;div class="row"&gt;
-					&lt;div class="mrgn-tp-md mrgn-bttm-md col-xs-12"&gt;
-						&lt;p class="pull-left text-white mrgn-bttm-0"&gt;En vedette&nbsp;:&nbsp;&lt;/p&gt;
-						&lt;p class="pull-left mrgn-bttm-0"&gt;&lt;a class="stretched-link text-white" href="#"&gt;[Titre de la promotion]&lt;/a&gt;&lt;/p&gt;
-					&lt;/div&gt;
-				&lt;/div&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-		</code></pre>
-	</details>
-
-	<div lang="en">
-	<h2>Evaluation and report</h2>
-	<ul>
-		<li>Accessibility pre-assessment #1
-			<ul>
-				<li><a href="./reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment report #1</span> English report</a></li>
-				<li><a href="./reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment report #1</span> French report</a></li>
-			</ul>
-		</li>
-		<li>Accessibility assessment #1
-			<ul>
-				<li><a href="./reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment report #1</span> English report</a></li>
-				<li><a href="./reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment report #1</span> French report</a></li>
-			</ul>
-		</li>
-	</ul>
+	<h3 id="codeSample2">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link" data-bg-color="#005B61">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Pleins feux sur&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section>
+
+&lt;section class="gc-featured-link" data-bg-color="#99dade">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Pleins feux sur&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section>
+
+&lt;section class="gc-featured-link" data-bg-color="#8F8F8F">
+	&lt;div class="container">
+		&lt;h2 class="wb-inv">Pleins feux sur&lt;/h2>
+		&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
+	&lt;/div>
+&lt;/section></code></pre>
+
+	<h2 id="descriptionSousLien">Exemple de lien en vedette avec description sous le lien</h2>
 </div>
+
+<section class="gc-featured-link">
+	<div class="container">
+		<h2 class="wb-inv">Pleins feux sur</h2>
+		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
+		<p>Description longue [facultatif]</p>
+	</div>
+</section>
+
+<div class="container">
+	<h3 id="codeSample3">Code</h3>
+	<pre><code>&lt;section class="gc-featured-link"&gt;
+	&lt;div class="container"&gt;
+		&lt;h2 class="wb-inv"&gt;Pleins feux sur&lt;/h2&gt;
+		&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Titre de la promotion]&lt;/a&gt;&lt;/p&gt;
+		&lt;p&gt;Description longue [facultatif]&lt;/p&gt;
+	&lt;/div&gt;
+&lt;/section&gt;</code></pre>
 </div>
diff --git a/components/gc-featured-link/gc-featured-link.js b/components/gc-featured-link/gc-featured-link.js
index 6dd5e775b2..029e2621d9 100644
--- a/components/gc-featured-link/gc-featured-link.js
+++ b/components/gc-featured-link/gc-featured-link.js
@@ -9,7 +9,7 @@
 
 var $document = wb.doc,
 	componentName = "gc-featured-link",
-	selector = ".provisional." + componentName,
+	selector = "." + componentName,
 	initEvent = "wb-init " + selector,
 	white = "#FFFFFF",
 	black = "#000000",
diff --git a/components/gc-featured-link/index.json-ld b/components/gc-featured-link/index.json-ld
index b24461a55b..b5d5b9904c 100644
--- a/components/gc-featured-link/index.json-ld
+++ b/components/gc-featured-link/index.json-ld
@@ -7,25 +7,38 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Featured link - Documentation and working example",
-		"fr": "Lien en vedette - Documentation et example pratique"
+		"en": "Featured link",
+		"fr": "Lien en vedette"
 	},
 	"description": {
 		"en": "This adds a featured link to a page that your institution needs to feature prominently.",
 		"fr": "Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence."
 	},
-	"modified": "2021-05-20",
+	"modified": "2024-02-21",
 	"componentName": "gc-featured-link",
-	"status": "provisional",
+	"status": "stable",
+	"version": "1.0.0",
 	"pages": {
+		"docs": [
+			{
+				"title": "Featured link",
+				"language": "en",
+				"path": "gc-featured-link-doc-en.html"
+			},
+			{
+				"title": "Lien en vedette",
+				"language": "fr",
+				"path": "gc-featured-link-doc-fr.html"
+			}
+		],
 		"examples": [
 			{
-				"title": "Featured link - Documentation and working example",
+				"title": "Featured link",
 				"language": "en",
 				"path": "gc-featured-link-en.html"
 			},
-		{
-				"title": "Lien en vedette - Documentation et example pratique",
+			{
+				"title": "Lien en vedette",
 				"language": "fr",
 				"path": "gc-featured-link-fr.html"
 			}
@@ -52,5 +65,233 @@
 				"path": "reports/a11y-2-fr.html"
 			}
 		]
-	}
+	},
+	"dependencies": "No dependency.",
+	"a11yGuidance": "No accessibility guidance.",
+	"variations": [
+		{
+			"name": {
+				"en": "Featured link - default",
+				"fr": "Lien en vedette - par défaut"
+			},
+			"status": "stable",
+			"description": {
+				"en": "This adds a featured link to a page that your institution needs to feature prominently.",
+				"fr": "Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence."
+			},
+			"iteration": "_:iteration_featuredLink_3",
+			"example": [
+				{
+					"en": { "href": "gc-featured-link-en.html", "text": "Featured link" },
+					"fr": { "href": "gc-featured-link-fr.html", "text": "Lien en vedette" }
+				}
+			],
+			"implementation": [
+				"_:implement_featuredLink",
+				"_:implement_migrationProvisional"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Stabilizing component.",
+					"fr": "Mars 2024 - Stabilisation de la composante."
+				},
+				{
+					"en": "August 2023 - Adding possibility to customize the background color.",
+					"fr": "Août 2023 - Ajout de la possibilité de personnaliser la couleur de fond."
+				},
+				{
+					"en": "June 2021 - Initial provisional implementation to gather user experience data.",
+					"fr": "Juin 2021 - Implémentation provisoire initiale pour recueillir des données sur l'expérience utilisateur."
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_featuredLink",
+			"iteration": "_:iteration_featuredLink_3",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the component manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
+			},
+			"instructions": {
+				"en": [
+					"Refer to the following code sample.",
+					"You can optionally add a description under the featured link.",
+					"To customize the background color, add the attribute <code>data-bg-color</code> to the <code>&lt;section></code> element. The value should be the hexadecimal code of the desired color, for example: <code>#005B61</code>."
+				],
+				"fr": [
+					"Référez-vous au code qui suit.",
+					"Vous pouvez facultativement ajouter une description sous le lien en vedette.",
+					"Pour personnaliser la couleur d'arrière-plan, ajoutez l'attribut <code>data-bg-color</code> à l'élément <code>&lt;section></code>. La valeur doit être le code hexadécimal de la couleur souhaitée, par exemple&nbsp;: <code>#005B61</code>."
+				]
+			},
+			"notes": {
+				"en": [
+					"When customizing the background color, the component will automatically apply the correct color to the text: <code>#FFFFFF</code> for dark colors, <code>#333333</code> for light colors, <code>#000000</code> for colors in-between."
+				],
+				"fr": [
+					"Lorsque la couleur de fond est personnalisée, la composante appliquera automatiquement la bonne couleur au texte : <code>#FFFFFF</code> pour les couleurs sombres, <code>#333333</code> pour les couleurs claires, <code>#000000</code> pour les couleurs intermédiaires."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<section class=\"gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<section class=\"gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Pleins feux sur</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t</div>\n</section>"
+					}
+				]
+			}
+		},
+		{
+			"@id": "_:implement_migrationProvisional",
+			"iteration": "_:iteration_featuredLink_3",
+			"name": {
+				"en": "Migration from provisional to stable v1.0.0",
+				"fr": "Migration de provisoire à stable v1.0.0"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers attempting to update the component from its provisional state to its stable state version 1.0.0.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs tentant de mettre à jour la composante à partir de l'état provoire vers l'état stable version 1.0.0."
+			},
+			"instructions": {
+				"en": [
+					"Remove the CSS class \"provisional\".",
+					"Remove the starting and end tags for both <code>&lt;div class=\"row\">&lt;/div></code> and <code>&lt;div class=\"col-xs-12\">&lt;/div></code>.",
+					"Update the <code>&lt;h2 class=\"wb-inv\"></code> title to \"Spotlight on\"."
+				],
+				"fr": [
+					"Supprimer la classe CSS \"provisoire\".",
+					"Supprimez les balises de début et de fin pour <code>&lt;div class=\"row\">&lt;/div></code> et <code>&lt;div class=\"col-xs-12\" >&lt;/div></code>.",
+					"Mettez à jour le titre <code>&lt;h2 class=\"wb-inv\"></code> à \"Pleins feux sur\"."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code before:",
+						"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+					},
+					{
+						"@type": "source-code",
+						"description": "Code after:",
+						"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Code avant :",
+						"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">En vedette</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+					},
+					{
+						"@type": "source-code",
+						"description": "Code après :",
+						"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Pleins feux sur</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Titre de la promotion]</a></p>\n\t</div>\n</section>"
+					}
+				]
+			}
+		}
+	],
+	"iteration": [
+		{
+			"@id": "_:iteration_featuredLink_3",
+			"name": "Featured link - Iteration 3",
+			"date": "2024-03",
+			"detectableBy": ".gc-featured-link:not(.provisional)",
+			"breaking": [
+				"Removed unnecessary grid",
+				"Changed hidden heading"
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"gc-featured-link\">\n\t<div class=\"container\">\n\t\t<h2 class=\"wb-inv\">Spotlight on</h2>\n\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLink_2",
+			"name": "Featured link - Iteration 2",
+			"date": "2023-08",
+			"detectableBy": ".provisional.gc-featured-link[data-bg-color]",
+			"additions": [
+				"Adding possibility to customize the background color."
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"provisional gc-featured-link\" data-bg-color\"#005B61\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLink_1",
+			"name": "Featured link - Iteration 1",
+			"date": "2021-06",
+			"detectableBy": ".provisional.gc-featured-link",
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"provisional gc-featured-link\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-xs-12\">\n\t\t\t\t<h2 class=\"wb-inv\">Featured</h2>\n\t\t\t\t<p><a class=\"stretched-link\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>"
+				}
+			]
+		},
+		{
+			"@id": "_:iteration_featuredLinkHelpers_1",
+			"name": "Featured link with helpers - Iteration 1",
+			"date": "unknown",
+			"detectableBy": ".bg-gctheme.opct-90 a.stretched-link",
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<div class=\"bg-gctheme opct-90\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"mrgn-tp-md mrgn-bttm-md col-xs-12\">\n\t\t\t\t<p class=\"pull-left text-white mrgn-bttm-0\">Featured: </p>\n\t\t\t\t<p class=\"pull-left mrgn-bttm-0\"><a class=\"stretched-link text-white\" href=\"#\">[Promotion title]</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+				}
+			]
+		}
+	],
+	"changesets": [
+		{
+			"@id": "_:cs_featuredLink",
+			"name": "Featured link",
+			"status": "stable",
+			"baseOnIteration": "_:iteration_featuredLink_1",
+			"detectableBy": ".gc-featured-link",
+			"layout": "Component spans across viewport width, link spans across container width.",
+			"semantic": "section>h2+a",
+			"style": "By default, the background color of the component is blue with white text.",
+			"static": [
+				"Featured",
+				"En vedette"
+			],
+			"schema": [
+				"Link title (type: STRING)",
+				"Link URL (type: STRING)",
+				"Link description (type: STRING)",
+				"Background color (type: STRING) - optional"
+			],
+			"configuration": "data-bg-color: customize the background color"
+		}
+	]
 }