Featured link

Below are working examples for the "Featured link" component.

Headings structure

The logic semantic structure of headings have not been followed to accommodate the following working examples.

On this page

• Default example
• Customized background color examples
• Example with featured link description below the link

Default example

Code

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

Customized background color examples

Dark background example:

Light color example:

Medium color example:

Code

<section class="gc-featured-link" data-bg-color="#005B61">
	<div class="container">
		<h2 class="wb-inv">Spotlight on</h2>
		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
	</div>
</section>

<section class="gc-featured-link" data-bg-color="#99dade">
	<div class="container">
		<h2 class="wb-inv">Spotlight on</h2>
		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
	</div>
</section>

<section class="gc-featured-link" data-bg-color="#8F8F8F">
	<div class="container">
		<h2 class="wb-inv">Spotlight on</h2>
		<p><a class="stretched-link" href="#">[Promotion title]</a></p>
	</div>
</section>

Example with featured link description below the link

Code

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