Page de thème et de sujet: Système de conception de Canada.ca
Obligatoire
Les pages de thème et les pages de sujet fournissent un accès aux sujets et aux pages de destination qui appuient l’achèvement des tâches.
Les pages de thème et les pages de sujet :
- supportent la navigation par thème plutôt que par institution pour accéder au contenu à l’échelle du gouvernement (voir Comment les gens trouvent leurs tâches : navigation par thèmes et navigation institutionnelle );
- organisent le contenu et la navigation par ordre de priorité en présentant d’abord les renseignements et les services les plus consultés.
Sur cette page
Quand l'utiliser
Ce modèle doit être utilisé pour la page de thème et les 2 premiers niveaux de sujets de l' arborescence thématique de Canada.ca .
Il est facultatif pour les sujets de niveau inférieur.
Quoi éviter
Les pages où les personnes peuvent lancer une tâche devraient être considérées comme du contenu de destination et ne devraient pas utiliser le modèle de page de thème et de sujet.
Le modèle de la page de sujet ne doit pas être utilisé pour faire de la promotion; utilisez plutôt consulter les pages d’événements promotionnels ou les pages de campagnes .
Comment mettre en œuvre
Vous pouvez utiliser la version bêta ou la version stable de ce modèle.
Version bêta de la page de thème et de sujet
La version bêta est une amélioration par rapport à la version stable. Le code est toujours en révision. Il se peut que des modifications y soient apportées.
La version bêta remplacera éventuellement la version stable.
Vous devrez utiliser un CSS distinct pour mettre en œuvre la version bêta de ce modèle.
Version bêta de la page de thème et de sujet
Code
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 property="name" id="wb-cont">[Titre du thème ou du sujet]</h1>
<p>1 ou 2 phrases d’introduction qui définissent les sous-sujets et les tâches principales qui peuvent être consultés sur cette page.</p>
</div>
<div class="col-md-6 mrgn-tp-sm hidden-sm hidden-xs provisional gc-topic-bg">
<div data-bgimg="img/825x200.jpg"></div>
</div>
</div>
</div>
<section class="well well-sm provisional gc-most-requested">
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>En demande</h2>
</div>
<div class="col-md-10">
<ul class="colcount-md-2">
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
<li><a href="#">[Lien à une tâche principale]</a></li>
</ul>
</div>
</div>
</div>
</section>
<div class="container">
<section class="gc-srvinfo">
<h2 class="wb-inv">Services et renseignements</h2>
<div class="row wb-eqht-grd">
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet avec action]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Choisissez une option dans le menu déroulant suivant afin de naviguer vers une autre page.</p>
<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel": false, "i18n": { "btn": "Go"} }'>
<p>[Naviguer vers une autre page]</p>
<ul>
<li><a href="../service-fr.html">Page de service</a></li>
<li><a href="../institutional/institution-fr.html">Page institutionnelle</a></li>
<li><a href="../content-fr.html">Page de contenu</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Lien à un sous-sujet]</a></h3>
<p>Résumé des renseignements disponibles ou des tâches pouvant être accomplies sur la page. Supprimez les longs libellés et les messages promotionnels. Utilisez une formulation basée sur l'action.</p>
</div>
</div>
</section>
<div class="row mrgn-tp-xl">
<div class="col-md-8">
<section class="gc-features">
<h2 class="wb-inv">En vedette</h2>
<div class="row">
<div class="col-md-6">
<img class="img-responsive thumbnail mrgn-bttm-sm" src="../../components/gc-features/img/feature-360x203.png" alt=""/>
</div>
<div class="col-md-6">
<h3 class="h5"><a class="stretched-link" href="#">[Lien à l’élément en vedette]</a></h3>
<p>Brève description de l’élément en vedette.</p>
</div>
</div>
</section>
</div>
<div class="col-md-4">
<section class="provisional gc-followus">
<h2>Dans les médias sociaux</h2>
<ul>
<li>
<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook : </span>NomPageFacebook</a>
</li>
<li>
<a href="#" rel="external" class="twitter"><span class="wb-inv">Twitter : </span>@CompteTwitter</a>
</li>
<li>
<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube : </span>NomYouTube</a>
</li>
<li>
<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram : </span>NomInstagram</a>
</li>
<li>
<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn : </span>NomLinkedIn</a>
</li>
</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
<header class="modal-header">
<h2 class="modal-title" id="lbx-title">Facebook</h2>
</header>
<div class="modal-body">
<ul class="list-unstyled lst-spcd">
<li>
<a href="#" rel="external">[Titre du premier compte Facebook]</a>
</li>
<li>
<a href="#" rel="external">[Titre du deuxième compte Facebook]</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Fermer<span class="wb-inv">Fermer la fenêtre superposée</span></button>
</div>
</section>
</div>
</div>
<section class="provisional gc-contributors">
<h2>De :</h2>
<ul>
<li><a href="#">[Ministère ou agence]</a></li>
<li><a href="#">[Ministère ou agence]</a></li>
</ul>
</section>
</div>
CSS
.provisional.gc-topic-bg div {
background: no-repeat;
margin-left: -15px;
min-height: 200px;
overflow: hidden;
width: calc(50vw - 15px);
}
.provisional.gc-most-requested {
border: none;
}
.provisional.gc-most-requested h2 {
font-size: 1.1em;
margin-top: 15px;
}
.provisional.gc-most-requested ul {
margin-bottom: 15px;
margin-top: 15px;
}
.provisional.gc-most-requested ul li {
font-family: Lato,sans-serif;
font-size: 87%;
font-weight: 700;
line-height: 1.5em;
}
.provisional.gc-followus .facebook::before,.provisional.gc-followus .instagram::before,.provisional.gc-followus .linkedin::before,.provisional.gc-followus .twitter::before,.provisional.gc-followus .youtube::before {
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 38px;
margin-right: 10px;
min-width: 38px
}
.provisional.gc-followus h2 {
font-size: 1.1em
}
.provisional.gc-followus ul {
display: block;
font-size: 87%;
font-weight: 700;
list-style: none;
-webkit-margin-before: 1em;
margin-block-start:1em;-webkit-padding-start: calc(1em + 6px);
padding-inline-start:calc(1em + 6px)}
.provisional.gc-followus ul li {
margin-bottom: 21px
}
.provisional.gc-followus ul li:last-child {
margin-bottom: 15px
}
.provisional.gc-followus ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 1.54;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
text-decoration: none
}
.provisional.gc-followus ul li a::before {
margin-right: 10px;
margin-top: -6px
}
.provisional.gc-followus ul li a:active,.provisional.gc-followus ul li a:focus,.provisional.gc-followus ul li a:hover {
text-decoration: underline
}
.provisional.gc-followus ul.list-inline {
-webkit-padding-start: 0;
padding-inline-start:0}
.provisional.gc-followus ul.list-inline li {
display: inline-block;
padding-right: 0
}
.provisional.gc-followus ul.list-inline li a {
height: 38px;
overflow: hidden;
width: 38px
}
.provisional.gc-followus ul.list-inline li a::before {
margin-top: 0
}
.provisional.gc-followus ul.list-inline li a:active,.provisional.gc-followus ul.list-inline li a:focus,.provisional.gc-followus ul.list-inline li a:hover {
outline: solid 2px #0535d2
}
.provisional.gc-followus .facebook::before {
background-image: url(../assets/gc-follow-us/facebook.svg)
}
.provisional.gc-followus .twitter::before {
background-image: url(../assets/gc-follow-us/twitter.svg)
}
.provisional.gc-followus .youtube::before {
background-image: url(../assets/gc-follow-us/youtube.svg)
}
.provisional.gc-followus .instagram::before {
background-image: url(../assets/gc-follow-us/instagram.svg)
}
.provisional.gc-followus .linkedin::before {
background-image: url(../assets/gc-follow-us/linkedin.svg)
}
.provisional.gc-contributors {
margin-top: 38px
}
.provisional.gc-contributors h2,.provisional.gc-contributors ul {
display: inline;
font-size: 87%;
margin-top: 0
}
.provisional.gc-contributors ul {
-webkit-padding-start: 0;
padding-inline-start:0}
.provisional.gc-contributors ul li {
display: inline-block;
font-weight: 700;
margin-right: .7em
}
@media screen and (max-width: 991px)
.provisional.gc-contributors ul {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
@media screen and (max-width: 991px)
.provisional.gc-contributors h2, .provisional.gc-contributors ul {
display: block;
}
@media screen and (max-width: 991px)
.provisional.gc-contributors ul li {
display: list-item;
margin-right: 0;
}
Version stable de la page de thème et de la page de sujet
La version stable sera éventuellement remplacée par la version bêta.
Directives pour la version stable de la page de thème

1 : Titre du thème
Obligatoire
Décrit le thème et le contenu de la page
-
Présentation
- Le titre du thème doit être une balise H1 unique.
- Il doit être la première composante de la page.
2 : Paragraphe d’introduction du thème
Obligatoire
Décrit les tâches principales (services et renseignements) et les sujets accessibles sur cette page
-
Contenu
- Elle donne un aperçu de l’ensemble des tâches principales pouvant être accomplies sur un thème donné.
- Le texte doit être court et concis.
- Le contenu est rédigé pour un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius ).
-
Présentation
- Cette composante figure sous le titre du thème.
- Elle se trouve à la gauche du carrousel du thème.
3 : Carrousel du thème
Facultative
Présente les tâches principales et les renseignements pertinents propres au thème en temps opportun
-
Contenu
- Utilisez la configuration Carrousels .
-
Présentation
- Le carrousel du thème figure en haut de la page.
- Il se trouve à droite du paragraphe d’introduction du thème.
4 : Réseaux de médias sociaux du thème
Conditionnelle
Présente les réseaux de médias sociaux propres au thème
-
Contenu
- Cette composante est obligatoire lorsqu’il y a un ou plusieurs réseaux de médias sociaux liés au thème qui existent.
- Utilisez la configuration Bloc des réseaux de médias sociaux (fenêtre « Suivez ») .
-
Présentation
- Cette composante figure sous le paragraphe d’introduction du thème.
5 : Services et renseignements
Obligatoire
Présente les sujets propres au thème
-
Contenu
- Utilisez la configuration Services et renseignements .
-
Présentation
- Cette composante figure sous les réseaux de médias sociaux propres au thème et à gauche de la section « En demande ».
- L’étiquette de l’en-tête est « Services et renseignements ».
6 : En demande
Obligatoire
Présente les services et renseignements les plus demandés propres au thème
-
Contenu
- Utilisez la configuration En demande .
-
Présentation
- Cette composante se trouve à droite de « Services et renseignements ».
- L’étiquette de l’en-tête est « En demande ».
7 : Autres renseignements pour les
Conditionnelle
Liens menant à des renseignements intéressant les publics cibles à l’échelle du gouvernement
-
Contenu
- Cette composante est obligatoire lorsqu’il y a une ou plusieurs pages de public cible à l’échelle du gouvernement ou de pages de sujets liées au thème qui existent.
- Utilisez la configuration Autres renseignements pour les .
-
Présentation
- Cette composante se trouve sous la section « En demande ».
- L’étiquette de l’en-tête est « Autres renseignements pour les ».
8 : Section « En vedette » du thème
Obligatoire
Fait la promotion des activités en cours propres au thème, menées par les ministères et organismes à l’échelle du GC
-
Contenu
- Utilisez la configuration Promotions contextuelles .
-
Présentation
- Cette composante se trouve en dessous de « Services et renseignements ».
Exemples concrets
- Exemple concret en français (sur GitHub)
- Exemple concret en anglais (sur GitHub)
Navigation de l’utilisateur
Le site Canada.ca s’articule autour de 15 thèmes fondés sur une analyse des tâches principales (renseignements et services les plus demandés) à l’échelle du gouvernement du Canada.
S’ils mettent l’accent sur les tâches principales liées aux renseignements et à la prestation des services, les thèmes donnent également un aperçu des activités du gouvernement du Canada menées à bien pour contribuer à la prestation des programmes et services (par exemple, recherches, consultations, élaboration de politiques).

Version textuelle
On peut accéder aux pages de thème à partir de la page d’accueil du site Canada.ca.
Directives pour la version stable de la page de sujet

1 : Titre du sujet
Obligatoire
Décrit le sujet et le contenu de la page
-
Présentation
- Le titre du sujet doit être une balise H1 unique.
- Il doit être la première composante de la page.
2 : Paragraphe d’introduction sur le sujet
Obligatoire
Décrit la page de sujets actuelle
-
Contenu
- Fournit un aperçu des tâches principales ou des sous-sujets auxquels on peut accéder à partir du sujet actuel
- Le texte doit être court et concis.
- Le contenu est rédigé pour un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius ).
-
Présentation
- Cette composante figure sous le titre du sujet.
- Elle se trouve à la gauche de l’image du sujet.
3 : Image du sujet
Facultative
Appuie et renforce les messages clés fournis sur la page de sujet
-
Contenu
- L’image doit correspondre aux messages clés se rapportant au sujet.
- L’image peut être affichée ailleurs sur le site.
- Les carrousels ne sont pas permis sur les pages de sujets.
- Utilisez la configuration Images .
-
Présentation
- L’image du sujet figure en haut de la page.
- Elle se trouve à la droite du paragraphe d’introduction.
- L’image n’est pas assortie d’un hyperlien.
- Consultez la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.
4 : Réseaux de médias sociaux du sujet
Facultative
Présente les réseaux de médias sociaux propres au sujet
-
Contenu
- Utilisez la configuration Bloc des réseaux de médias sociaux (fenêtre « Suivez ») .
-
Présentation
- Cette composante se trouve sous le paragraphe d’introduction du sujet.
5 : Services et renseignements
Obligatoire
Énumère les sous-sujets et le contenu de destination liés au sujet actuel
-
Contenu
- Utilisez la configuration Services et renseignements .
-
Présentation
- Cette composante se trouve sous les réseaux de médias sociaux liées au sujet et à gauche de « En demande ».
6 : En demande
Obligatoire sur les pages de thème et les pages de sujet du premier niveau
Comprend des tâches principales pour le sujet actuel
-
Contenu
- Utilisez la configuration En demande .
-
Présentation
- Cette composante se trouve à droite de « Services et renseignements ».
7 : Collaborateurs
Obligatoire
Liens menant aux institutions qui soutiennent le sujet
-
Contenu
- Utilisez la configuration Collaborateurs .
-
Présentation
- Cette composante se trouve sous la section « En demande ».
8 : Autres renseignements pour les
Conditionnelle
Fournit des liens aux renseignements destinés au public à l’échelle du gouvernement
-
Contenu
- Ce composant est obligatoire lorsqu’il y un ou plusieurs [sujets] liés aux pages destinées aux publics à l’échelle du gouvernement.
- Utilisez la configuration Autres renseignements pour les .
-
Présentation
- Cette composante figure sous la section « Collaborateurs ».
9 : Ce que nous faisons
Conditionnelle
Fournit des liens vers le contenu relatif à l’élaboration de politiques et programmes qui est le plus pertinent pour le sujet actuel
-
Contenu
- Cette composante est obligatoire lorsqu’il existe un contenu relatif à l’élaboration de politiques et programmes liés au sujet actuel.
- Utilisez la configuration Ce que nous faisons .
-
Présentation
- Cette composante se trouve sous les sections « Services et renseignements » et « En demande ».
10 : Section « En vedette » du sujet
Facultative
Fait la promotion des activités actuelles menées par les ministères et les organismes dans l’ensemble du GC qui sont liées au sujet actuel
-
Contenu
- Utilisez la configuration Promotions contextuelles .
-
Présentation
- Cette composante se trouve en dessous de « Ce que nous faisons ».
Exemples concrets
- Exemple concret en français (sur GitHub)
- Exemple concret en anglais (sur GitHub)
Navigation de l’utilisateur
Chacun des 15 thèmes consiste en un certain nombre de sujets qui traitent de toute la gamme de renseignements et de services ayant trait à ce thème qui sont offerts à l’échelle du gouvernement.
Une page de sujet comprend :
- des liens menant aux renseignements et services les plus demandés ainsi que vers les politiques, les lois et règlements, les publications, les formulaires, les nouvelles, les consultations et les initiatives les plus pertinents;
- des liens d’entrée menant aux sujets secondaires connexes ainsi que des renvois croisés vers d’autres thèmes;
- des liens menant aux pages destinées aux publics cibles, le cas échéant.
Le modèle pour les pages de sujet inclut un certain nombre de composantes obligatoires et facultatives afin de pouvoir s’adapter à la multitude de domaines possibles liés aux sujets se rapportant au GC .

Version textuelle
Navigation vers une page de sujets suit un des deux chemins :
- De la page d’accueil à une page thématique à une page de sujets
- De la page d’accueil à la page des ministères et organismes, à un profil institutionnel, à une page de sujets.
Recherche
Nous avons testé avec succès la version bêta de la page de thème et de sujet durant un projet d'optimisation mené de concert avec Services publics et Approvisionnement Canada (résumé de recherche à venir).
Derniers changements
2020-07-10 :
- Modifications à la disposition des colonnes de la section Services et renseignements pour les tabelettes
- Clarification des directives pour les comptes de médias sociaux
2020-06-30 : une nouvelle version bêta de ce modèle a été ajoutée.
Détails de la page
- Date de modification :