Language selection

Search

Context-specific features - Canada.ca design pattern

Status
Up to spec
Type
Canada.ca design pattern
Last review
2021-01-18
Conforming to
Content and IA spec 2.1
Specification
Context-specific features - Canada.ca design pattern
Technical name
  • gc-features
  • gc-initiatives (extends)
Component version
Version 3.1

Working example

Context-specific features - v6.1

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 - v6.1

Government initiatives

[Feature hyperlink text]

Brief description of the feature being promoted.

[Feature hyperlink text]

Brief description of the feature being promoted.

GC activities and initiatives - Removal - v4.0.28

Feature - Markup change - v4.0.28

One tile - Promotional feature

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.

Evaluation and report

There is no evaluation and report available for this component.

API (Component version 3.1)

CSS Class Template Visual rendering Schema
Version 2.1 Version 3.1 Version 2.0 Version 1.0

CSS Class (v2.1)

gc-features
Component: Context-specific features
Version notes
Version 2.1 (v6.1)
  • Added: .gc-features
  • 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 (v3.1)

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

gc-features component

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

		<!-- One column -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-md-8">
			<div class="row">
				<div class="col-md-6 col-xs-12">
					<img class="img-responsive thumbnail mrgn-bttm-sm" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				</div>
				<div class="col-md-6 col-xs-12">
					<h3 class="h5"><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-column layout
<section class="gc-features">
	<h2>[[comp:Feature dct:title]]</h2>
	<div class="row row-eqht">

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

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

		<!-- Three column [default] -->
		<div data-for="comp:FeatureItem in (comp:Feature comp:features )" class="col-lg-4 col-md-6 mrgn-bttm-md">
			<h3 class="h5"><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
			<img class="img-responsive thumbnail mrgn-bttm-sm" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
			<p>[[comp:FeatureItem dct:description]]</p>
		</div>

	</div>
</section>
Cohabit design pattern

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="img-responsive thumbnail mrgn-bttm-sm" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
				</div>
				<div class="col-md-6">
					<h3 class="h5"><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 class="h5"><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
					<img class="img-responsive thumbnail mrgn-bttm-sm" 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: gc-initiatives

Distinguishable by its .well containers inside .col-sm-6 columns.

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

		<!-- One column -->
		<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 brdr-rds-0 eqht-trgt">
			<img class="img-responsive full-width" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
			<h3 class="h5"><a class="stretched-link" data-bind="(href = comp:FeatureItem foaf:page)">[[comp:FeatureItem dct:title]]</a></h3>
			<p>[[comp:FeatureItem dct:description]]</p>
		</div>

		<!-- Two column -->
		<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 brdr-rds-0 eqht-trgt">
			<img class="img-responsive full-width" src="[[comp:FeatureItem html:img-src]]" alt="[[comp:FeatureItem html:img-alt]]"/>
			<h3 class="h5"><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>
Previous version
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 (v2.0)

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

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: