Lien en vedette

Vous trouverez ci-dessous des exemples pratiques pour la composante « Lien en vedette ».

Structure des en-têtes

La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter aux exemples pratiques suivants.

Sur cette page

• Exemple par défaut
• Exemple avec couleur d'arrière-plan personnalisée
• Exemple de lien en vedette avec description sous le lien

Exemple par défaut

Code

<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>
	</div>
</section>

Exemple avec couleur d'arrière-plan personnalisée

Exemple avec couleur sombre :

Exemple avec couleur claire :

Exemple avec couleur intermédiaire :

Code

<section class="gc-featured-link" data-bg-color="#005B61">
	<div class="container">
		<h2 class="wb-inv">Pleins feux sur</h2>
		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
	</div>
</section>

<section class="gc-featured-link" data-bg-color="#99dade">
	<div class="container">
		<h2 class="wb-inv">Pleins feux sur</h2>
		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
	</div>
</section>

<section class="gc-featured-link" data-bg-color="#8F8F8F">
	<div class="container">
		<h2 class="wb-inv">Pleins feux sur</h2>
		<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
	</div>
</section>

Exemple de lien en vedette avec description sous le lien

Code

<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>