diff --git a/components/gc-featured-link/_base.scss b/components/gc-featured-link/_base.scss
index 542ba3b67..7944f0b7c 100644
--- a/components/gc-featured-link/_base.scss
+++ b/components/gc-featured-link/_base.scss
@@ -2,20 +2,27 @@
 
 .gc-featured-link {
 	background-color: $bg-gctheme;
+	color: #fff;
+	font-family: Lato, sans-serif;
+	opacity: .9;
+	padding-bottom: $space-md;
+	padding-top: $space-md;
 
-	&.provisional {
-		font-family: Lato, sans-serif;
-		opacity: .9;
-		padding-bottom: $space-md;
-		padding-top: $space-md;
+	p:first-of-type {
+		margin-bottom: $space-0;
+	}
 
-		p:first-of-type {
-			font-weight: $bold-weight;
-			margin-bottom: $space-0;
-		}
+	a {
+		color: #fff;
+		font-weight: $bold-weight;
+	}
+
+	html:not(.wb-disable) &[data-bg-color] {
+		background-color: transparent;
+		color: $text-color;
 
-		p, a {
-			color: #fff;
+		a {
+			color: $text-color;
 		}
 	}
 }
diff --git a/components/gc-featured-link/gc-featured-link-en.html b/components/gc-featured-link/gc-featured-link-en.html
index c7b286db6..8ef7ad9a6 100644
--- a/components/gc-featured-link/gc-featured-link-en.html
+++ b/components/gc-featured-link/gc-featured-link-en.html
@@ -34,7 +34,7 @@ <h2>Purpose</h2>
 	<h2>Working examples</h2>
 
 	<h3>Featured link (provisional v1.0)</h3>
-	<p>The logic semantic structure of headings have not been followed to accommodate each working examples.</p>
+	<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>
 </div>
 
 <section class="provisional gc-featured-link">
@@ -50,19 +50,107 @@ <h2 class="wb-inv">Featured</h2>
 </section>
 
 <div class="container">
-	<h3>Code</h3>
+	<h4 id="codeSample1">Code</h4>
 	<pre><code>&lt;section class="provisional 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 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;/section&gt;
-	</code></pre>
+	&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>
+	<p class="mrgn-tp-lg">Dark background example:</p>
+</div>
+
+<section class="provisional 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>
+	</div>
+</section>
+
+<div class="container">
+	<p class="mrgn-tp-lg">Light color example:</p>
+</div>
+
+<section class="provisional 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>
+	</div>
+</section>
+
+<div class="container">
+	<p class="mrgn-tp-lg">Medium color example:</p>
+</div>
+
+<section class="provisional 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>
+	</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>
diff --git a/components/gc-featured-link/gc-featured-link-fr.html b/components/gc-featured-link/gc-featured-link-fr.html
index eec2ccd02..d9e7cec19 100644
--- a/components/gc-featured-link/gc-featured-link-fr.html
+++ b/components/gc-featured-link/gc-featured-link-fr.html
@@ -34,7 +34,7 @@ <h2>Objectif</h2>
 	<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 à chaque exemples pratiques. </p>
+	<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>
 </div>
 
 <section class="provisional gc-featured-link">
@@ -50,19 +50,107 @@ <h2 class="wb-inv">En vedette</h2>
 </section>
 
 <div class="container">
-	<h3>Code</h3>
-	<pre><code>&lt;section class="provisional 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;En vedette&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;/div&gt;
-		&lt;/div&gt;
-	&lt;/section&gt;
-	</code></pre>
+	<h4 id="codeSample1">Code</h4>
+	<pre><code>&lt;section class="provisional 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;/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>
+
+<section class="provisional 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>
+	</div>
+</section>
+
+<div class="container">
+	<p class="mrgn-tp-lg">Exemple avec couleur claire&nbsp;:</p>
+</div>
+
+<section class="provisional 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>
+	</div>
+</section>
+
+<div class="container">
+	<p class="mrgn-tp-lg">Exemple avec couleur intermédiaire&nbsp;:</p>
+</div>
+
+<section class="provisional 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>
+	</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>
diff --git a/components/gc-featured-link/gc-featured-link.js b/components/gc-featured-link/gc-featured-link.js
new file mode 100644
index 000000000..6dd5e775b
--- /dev/null
+++ b/components/gc-featured-link/gc-featured-link.js
@@ -0,0 +1,88 @@
+/**
+ * @title WET-BOEW Featured link
+ * @overview Stylize a featured link
+ * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ * @author @garneauma
+ */
+( function( $, window, wb ) {
+"use strict";
+
+var $document = wb.doc,
+	componentName = "gc-featured-link",
+	selector = ".provisional." + componentName,
+	initEvent = "wb-init " + selector,
+	white = "#FFFFFF",
+	black = "#000000",
+	darkgrey = "#333333",
+	luminance1, luminance2,
+	contrastRatio,
+
+	/**
+	 * @method init
+	 * @param {jQuery Event} event Event that triggered the function call
+	 */
+	init = function( event ) {
+
+		// Start initialization
+		// returns DOM object = proceed with init
+		// returns undefined = do not proceed with init (e.g., already initialized)
+		var elm = wb.init( event, componentName, selector ),
+			$elm;
+
+		if ( elm ) {
+			var bgColor = elm.dataset.bgColor,
+				textColor;
+
+			$elm = $( elm );
+
+			if ( bgColor ) {
+				if ( getContrastRatio( white, bgColor ) >= 4.5 ) {
+					textColor = white;
+				} else if ( getContrastRatio( darkgrey, bgColor ) >= 4.5 ) {
+					textColor = darkgrey;
+				} else {
+					textColor = black;
+				}
+
+				elm.style.backgroundColor = bgColor;
+				elm.style.color = textColor;
+				elm.querySelectorAll( "p, a" ).forEach( e => {
+					e.style.color = textColor;
+				} );
+			}
+
+			// Identify that initialization has completed
+			wb.ready( $elm, componentName );
+		}
+	},
+
+	getContrastRatio = function( color1, color2 ) {
+		function getLuminance( color ) {
+			var rgb = [ color.substr( 1, 2 ), color.substr( 3, 2 ), color.substr( 5, 2 ) ].map( hex => parseInt( hex, 16 ) / 255 );
+
+			for ( let i = 0; i < rgb.length; i++ ) {
+				if ( rgb[ i ] <= 0.03928 ) {
+					rgb[ i ] = rgb[ i ] / 12.92;
+				} else {
+					rgb[ i ] = Math.pow( ( rgb[ i ] + 0.055 ) / 1.055, 2.4 );
+				}
+			}
+
+			return 0.2126 * rgb[ 0 ] + 0.7152 * rgb[ 1 ] + 0.0722 * rgb[ 2 ];
+		}
+
+		luminance1 = getLuminance( color1 );
+		luminance2 = getLuminance( color2 );
+
+		contrastRatio = ( Math.max( luminance1, luminance2 ) + 0.05 ) / ( Math.min( luminance1, luminance2 ) + 0.05 );
+
+		return contrastRatio.toFixed( 2 );
+	};
+
+// Bind the init event of the plugin
+$document.on( "timerpoke.wb " + initEvent, selector, init );
+
+// Add the timer poke to initialize the plugin
+wb.add( selector );
+
+} )( jQuery, window, wb );