Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Promotions contextuelles - Configuration de conception de Canada.ca

Statut
Stable
Type
Conception de Canada.ca
Dernière revue
2021-07-21
Est conforme à
Spécifications du contenu et de l'architecture de l'information 2.1
Spécification
Promotions contextuelles - Configuration de conception de Canada.ca
Nom technique
  • gc-features
Version de la composante
Version 5.0
Version compatible et fonctionnelle
  • Version 5
  • Version 4 (déployée avec la version 9.5.0 de GCWeb)
  • Version 3 (désuet)
  • Version 2 (désuet)
  • Version 1 (désuet)

Modèles de conception précédents

Le rendu visuel réel des modèles de conception précédents peut varier en raison de certaines modifications récentes.

Promotions contextuelles avec GCWeb v6.1 - Supprimé

En vedette

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

Initiatives du gouvernement du Canada v6.1 - Supprimé

Initiatives du gouvernement

[Lien à l'initiative en vedette]

Brève description de l'initiative en vedette.

[Lien à l'initiative en vedette]

Brève description de l'initiative en vedette.

Promotions contextuelles avec GCWeb v4.0.28 - Supprimé

En vedette

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

Activités et initiatives du gouvernement du Canada avec GCWeb v4.0.28 - Supprimé
En vedette - Changement de balisage avec GCWeb v4.0.28 - Supprimé

Une tuile - Élément en vedette

[Lien à l'élément en vedette]

Brève description de l'élément en vedette.

Evaluation and report

API (Composante v5.0)

Classes CSS Gabarit Rendu visuel Schéma
Version 3.0 Version 5.0 Version 3.0 Version 1.0

Classes CSS (v3.0)

gc-features
Composante: Promotions contextuelles
Notes de version
Version 3.0 (v9.5.0)
  • Ajouté: .well
  • Ajouté: .well-sm
  • Supprimé: .img-responsive
  • Supprimé: .mrgn-bttm-md
  • Supprimé: .mrgn-bttm-sm
  • Supprimé: .brdr-rds-0
  • Obsolète: .gc-initiatives (n'avait aucun style ni comportement attaché)
Version 2.1 (v6.1)
  • Ajouté: .gc-features et .gc-initiatives
  • Ajouté: .stretched-link
Version 2.0 (v4.0.28)
  • Obsolète: .gc-nttvs et .gc-prtts
Version 1.0 (antérieur à v4.0.28)
  • Ajouté: .gc-nttvs et .gc-prtts

Gabarit (v5.0)

Note v5.0: La classe wb-eqht à été remplacée par wb-eqht-grd afin de prendre avantage du CSS lorsque possible, cependant, la classe wb-eqht est toujours supportée.

Note v3.1: Le variante de cohabitation pour les tuiles des items en vedette a été introduite afin de supporter la version beta du gabarit Thématique et sujet.

Composante gc-features

Promotion à une tuile
<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>
Promotion à deux ou trois tuiles
<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>
Version précédente (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>
Modèles de cohabitation (variant)

La composante en vedette peut être localisée à droite ou à gauche de la composante qui cohabite en intervertissant col-md-8 et col-md-4.

À utiliser dans ce contexte:

<div class="row mrgn-tp-xl">
	<div class="col-md-8">
		<section class="gc-features">
			<!-- gc-feature ici -->
		</section>
	</div>
	<div class="col-md-4">
		<!-- Composante qui cohabite ici. Par exemple la composante Suivez-nous -->
	</div>
</div>
Promotion à une tuile - Variante de cohabitation
<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">
		<!-- Composante qui cohabite ici. Par example la composante Suivez-nous -->
	</div>
</div>
Promotion à deux tuiles - Variante de cohabitation
<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">
		<!-- Composante qui cohabite ici. Par example la composante Suivez-nous -->
	</div>
</div>

Initiatives du gouvernement du Canada (variant)

Se distingue par la largeur de ses colonnes de 50% .col-sm-6 et la taille des images à 520 x 200.

La classe .gc-initiatives à été rendu obsolète à la version v9.5.0 (tel que mentionné ci-haut dans la section de la classe de l'API) et puisqu'elle n'avait aucun style ni comportement attachés, aucune répercussion n'est anticipée suite à la suppression.

<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>
Notes de version
Version 4.0 (GCWeb v11.3.1)
  • Ajouté: .wb-eqht-grd
  • Supprimé: .wb-eqht
Version 3.1 (GCWeb v9.1)
  • Ajouté: Modèle de conception de cohabitation, utilisable dans un contexte spécifique
Version 3.0 (GCWeb v6.1)
  • Obsolète: <figure> et <figcaption>
  • Obsolète: <a> comme enveloppe
Version 2.0 (GCWeb v4.0.28)
  • Ajouté: <figure> et <figcaption>
Version 1.0 (antérieur à GCWeb v4.0.28)
  • Avait: la balise <section>

Rendu visuel (v3.0)

Notes de version
Version 3.0 (v9.5.0)
  • Modèle simplifié et fonctionnalités adaptées aux initiatives gouvernementales.
  • La disposition du texte correspondant à la composante Service et Information.
Version 2.0 (v6.1)
  • Supprimé: Effet d'ombre portée au passage de la souris.
  • Supprimé: Image miniature non cliquable sur la mise en page à une colonne.
Version 1.0 (antérieure à v6.1)
  • Rendu original

Schéma (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:featureCol
	dct:issued "2017-01-01"^^xsd:date ;
	rdfs:label "Column layout rendering"@en ;
	a rdf:Property ;
	rdfs:range comp:Feature1Col ;
	rdfs:range comp:Feature2Col ;
	rdfs:range comp:Feature3Col .

comp:Feature1Col
	a rdfs:Class ;
	rdfs:label "One Column"@en .

comp:Feature2Col
	a rdfs:Class ;
	rdfs:label "Two Column"@en .

comp:Feature3Col
	a rfds:Class ;
	rdfs:label "Three Column"@en .
	rdfs:comment "Not used for gc-initiatives" .

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:featureCol ;
		sh:in ( comp:Feature1Col comp:Feature2Col comp:Feature3Col ) ;
		sh:severity sh:Violation ;
		sh:defaultValue comp:Feature2Col ;
	] .

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 html:img-src ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path html:img-alt ;
			sh:uniqueLang true ;
			sh:severity sh:Warning ;
		]
		[
			sh:path foaf:page ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
	) .

Exemple JSON-LD

{
	"@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:featureCol": "comp:Feature2Col",
	"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]"
		}
	]
}

Référence

Détails de la page

Date de modification :