Language selection

Search


Featured link

Unstable feature

To be used at your own risks. All functionalities described below could be removed in any subsequent minor/major release and are excluded from the GCWeb public API.

Documentation and/or working examples for those features could be incomplete or not available.

See all provisional features.

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

Previous pattern (Home page)

Pattern using helpers:

Featured: 

[Promotion title]

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

Evaluation and report

Page details

Date modified: