Language selection

Français fr

/ Gouvernement du Canada

Search

Context-specific features - Canada.ca design pattern

Status

Stable

Type

Canada.ca design pattern

Last review

2021-07-21

Conforming to

Content and IA spec 2.1

Specification

Context-specific features - Canada.ca design pattern

Technical name

gc-features

Component version

Version 5.0

Supported working versions

Version 5
Version 4 (released with version 9.5.0 of GCWeb)
Version 3 (deprecated)
Version 2 (deprecated)
Version 1 (deprecated)

Previous design patterns

Actual visual rendering of previous design patterns may vary due to recent changes.

Context-specific features with GCWeb v6.1 - Removed

Features

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

GC initiatives with GCWeb v6.1 - Removed

Government initiatives

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

Context-specific features with GCWeb v4.0.28 - Removed

Features

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

GC activities and initiatives with GCWeb v4.0.28 - Removed

Feature - Markup change with GCWeb v4.0.28 - Removed

One tile - Promotional feature

[Feature hyperlink text]

Evaluation and report

Accessibility pre-assessment #1
- Pre-assessment report #1 English report
- Pre-assessment report #1 French report
Accessibility assessment #1
- Assessment report #1 English report
- Assessment report #1 French report

API (Component v5.0)

CSS Class	Template	Visual rendering	Schema
Version 3.0	Version 5.0	Version 3.0	Version 1.0

CSS Class (v3.0)

gc-features: Component: Context-specific features

Version notes

Version 3.0 (v9.5.0)

Added: .well
Added: .well-sm
Removed: .img-responsive
Removed: .mrgn-bttm-md
Removed: .mrgn-bttm-sm
Removed: .brdr-rds-0
Deprecated: .gc-initiatives (had no style nor behaviour attached)

Version 2.1 (v6.1)

Added: .gc-features and .gc-initiatives
Added: .stretched-link

Version 2.0 (v4.0.28)

Deprecated: .gc-nttvs and .gc-prtts

Version 1.0 (prior to v4.0.28)

Had: .gc-nttvs and .gc-prtts

Template (v5.0)

Note v5.0: The class wb-eqht was replaced with wb-eqht-grd to take advantage of CSS when possible, but wb-eqht is still supported.

Note v3.1: The Cohabit design pattern for feature tile was introduced to support the theme/topic beta template.

gc-features component

One feature tile layout

<section class="gc-features">
	<h2>[[comp:Feature dct:title]]</h2>
	<div class="row">

		<!-- One column -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-md-8">
			<div class="row">
				<div class="col-sm-6">
					<img class="thumbnail" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				</div>
				<div class="col-sm-6">
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>
		</div>

	</div>
</section>

Two or three feature tiles layout

<section class="gc-features">
	<h2>[[comp:Feature dct:title]]</h2>
	<div class="row wb-eqht-grd">

		<!-- Column one -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
			<div class="well well-sm eqht-trgt">
				<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
				<p>[[comp:FeatureItem dct:description]]</p>
			</div>
		</div>

		<!-- Column two -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
			<div class="well well-sm eqht-trgt">
				<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
				<p>[[comp:FeatureItem dct:description]]</p>
			</div>
		</div>

		<!-- Column three [default] -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
			<div class="well well-sm eqht-trgt">
				<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
				<p>[[comp:FeatureItem dct:description]]</p>
			</div>
		</div>

	</div>
</section>

Previous version (v4.0)

<section class="gc-features">
		<h2>[[comp:Feature dct:title]]</h2>
		<div class="row wb-eqht">

			<!-- Column one -->
			<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
				<div class="well well-sm eqht-trgt">
					<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>

			<!-- Column two -->
			<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
				<div class="well well-sm eqht-trgt">
					<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>

			<!-- Column three [default] -->
			<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-sm-6">
				<div class="well well-sm eqht-trgt">
					<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>

		</div>
	</section>

Cohabit design pattern

The GC Features component can be located on the right or on the left of the cohabit component by interchanging col-md-8 and col-md-4.

To be used in this context:

<div class="row mrgn-tp-xl">
	<div class="col-md-8">
		<section class="gc-features">
			<!-- gc-feature here -->
		</section>
	</div>
	<div class="col-md-4">
		<!-- Cohabit component here. For example the Follow us component -->
	</div>
</div>

One feature tile - Cohabit design pattern

<div class="row mrgn-tp-xl">
	<div class="col-md-8">

		<section class="gc-features">
			<h2 class="wb-inv">[[comp:Feature dct:title]]</h2>
			<div class="row" data-for="comp:FeatureItem in ( comp:Feature comp:features )">

				<!-- One column -->
				<div class="col-md-6">
					<img class="thumbnail" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				</div>
				<div class="col-md-6">
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>
		</section>

	</div>
	<div class="col-md-4">
		<!-- Cohabit component here. For example the Follow us component -->
	</div>
</div>

Two feature tiles - Cohabit design pattern

<div class="row mrgn-tp-xl">
	<div class="col-md-8">

		<section class="gc-features">
			<h2 class="wb-inv">[[comp:Feature dct:title]]</h2>
			<div class="row wb-eqht-grd">

				<!-- Two column -->
				<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-md-6">
					<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
					<p>[[comp:FeatureItem dct:description]]</p>
				</div>
			</div>
		</section>

	</div>
	<div class="col-md-4">
		<!-- Cohabit component here. For example the Follow us component -->
	</div>
</div>

Features Variant: Government initiatives

Distinguishable by its 50% width .col-sm-6 columns and images of size of 520 x 200.

The .gc-initiatives class was deprecated at version v9.5.0 (as mentioned above in the Class section of the API) and since it had no style nor behaviour attached, no side effects are to be expected by this removal.

<section class="gc-features">
	<h2>[[comp:Feature dct:title]]</h2>
	<div class="row wb-eqht-grd">

		<!-- Column one -->
		<div data-if="comp:Feature comp:featureType == 'gc-initiatives'" data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-sm-6">
			<div class="well well-sm eqht-trgt">
			<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
			<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
			<p>[[comp:FeatureItem dct:description]]</p>
		</div>

		<!-- Column two -->
		<div data-if="comp:Feature comp:featureType == 'gc-initiatives'" data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-sm-6">
			<div class="well well-sm eqht-trgt">
			<img src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
			<h3><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
			<p>[[comp:FeatureItem dct:description]]</p>
		</div>

	</div>
</section>

Version notes

Version 4.0 (GCWeb v11.3.1)

Added: .wb-eqht-grd
Removed: .wb-eqht

Version 3.1 (GCWeb v9.1)

Added: Cohabit design pattern, usable in a specific context

Version 3.0 (GCWeb v6.1)

Deprecated: <figure> and <figcaption>
Deprecated: <a> as a wrapper

Version 2.0 (GCWeb v4.0.28)

Added: <figure> and <figcaption>

Version 1.0 (prior to GCWeb v4.0.28)

Had: <section> tags

Visual rendering (v3.0)

Version notes

Version 3.0 (v9.5.0)

Simplified template and make features match government initiatives.
Text layout match the Service and Information component

Version 2.0 (v6.1)

Removed: Drop shadow effect on mouse over
Removed: Thumbnail image not clickable on one-column layout

Version 1.0 (prior to v6.1)

Original rendering

Schema (v1.0)

#
# Schema of the Context-specific features component
#

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix skos: <http://www.w3.org/2004/02/skos/core#> .
@prefix wms: <http://vocab.canada.ca/wms> .
@prefix comp: <http://vocab.canada.ca/wms/component> .


comp:Feature
	dct:issued "2017-01-01"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	wms:componentName "gc-features" ;
	rdfs:label "Context-specific features"@en ;
	rdfs:label "Promotions contextuelles"@fr ;
	rdfs:isDefinedBy <https://design.canada.ca/common-design-patterns/feature-tiles.html>@en ;
	rdfs:isDefinedBy <https://conception.canada.ca/configurations-conception-communes/vignettes-promotionnelles.html>@fr ;

comp:FeatureItem
	dct:issued "2017-01-01"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	rdfs:label "Features link"@en ;
	rdfs:label "Lien en vedette"@fr ;

comp:features
	dct:issued "2017-01-01"^^xsd:date ;
	a rdf:Property ;
	rdfs:domains comp:Feature ;
	rdfs:range comp:FeatureItem .

comp:FeatureType
	a rdfs:Class ;
	rdfs:label "Allows variants"@en .

Shapes graphs

#
# Shape graph of the Context-specific features component
#

@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix comp: <http://vocab.canada.ca/wms/component> .
@prefix html: <http://vocab.canada.ca/wms/html/img#> .

comp:FeatureShape
	a sh:NodeShape ;
	sh:targetClass comp:Feature ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path comp:features ;
			sh:minExclusive 0 ;
			sh:maxInclusive 3 ;
			sh:severity sh:Warning ;
		]
	)
	sh:property [
		sh:path comp:featureType ;
		sh:targetClass comp:FeatureType ;
	] .

comp:FeatureItemShape
	a sh:NodeShape ;
	sh:targetClass comp:FeatureItem ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path dct:description ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path foaf:page ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path html:img-src ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path html:img-alt ;
			sh:uniqueLang true ;
			sh:severity sh:Warning ;
		]
	) .

JSON-LD sample

{
	"@context": {
		"foaf": "http://xmlns.com/foaf/0.1/",
		"dct": "http://purl.org/dc/terms/",
		"comp": "http://vocab.canada.ca/wms/component"
		"html": "http://vocab.canada.ca/wms/html/img"
	},
	"dct:title": "Government initiatives",
	"comp:featureType": "gc-initiatives",
	"comp:features": [
		{
			"foaf:page": "https://www.canada.ca/feature/link",
			"dct:title": "[Feature item hyperlink text]",
			"dct:description": "[Feature item description]",
			"html:img-src": "[Feature item image URL]",
			"html:img-alt": "[Feature item image alternative text]"
		},
		{
			"foaf:page": "https://www.canada.ca/feature/link/2",
			"dct:title": "[Feature item hyperlink text 2]",
			"dct:description": "[Feature item description 2]",
			"html:img-src": "[Feature item image URL 2]",
			"html:img-alt": "[Feature item image alternative text 2]"
		}
	]
}

Reference

SHACL Shapes Constraint Language (https://www.w3.org/TR/shacl/)

Page details

Date modified:: 2022-11-14