Featured link

Status

Provisional

Type

Canada.ca design pattern

Last review

2021-07-07

Conforming to

Content and IA Specification - Version 2.1.2

Guidance

n/a

Technical name

gc-featured-link

Purpose

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.

Working examples

Featured link (provisional v1.0)

The logic semantic structure of headings have not been followed to accommodate the following working example. You can go directly to the source code.

Code

<section class="provisional 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>
	</div>
</section>

Customized background color

To customize the background color, add the attribute data-bg-color. The value should be the hexadecimal code of the desired color.

The plugin will automatically apply the correct color to the text: #FFFFFF for dark colors, #333333 for light colors, #000000 for colors in-between.

The logic semantic structure of headings have not been followed to accommodate each working examples. You can go directly to the source code.

Dark background example:

Light color example:

Medium color example:

Code

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

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

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

Previous design patterns

<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: </p>
						<p class="pull-left mrgn-bttm-0"><a class="stretched-link text-white" href="#">[Promotion title]</a></p>
					</div>
				</div>
			</div>
		</div>