Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

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 :

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.

Modèle avec directives

Version bêta de la page de thème et de sujet

Modèle bêta avec directives

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
Modèle de page de thème
Modèle de page de thème indiquant les parties qui composent sa structure. Lire de haut en bas et de gauche à droite. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

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

5 : Services et renseignements

Obligatoire

Présente les sujets propres au thème

  • Contenu
  • 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
  • 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
  • Présentation
    • Cette composante se trouve en dessous de « Services et renseignements ».

Exemples concrets

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

Diagramme de la façon de naviguer
Diagramme de la façon de naviguer vers les pages de thème dans le site Canada.ca. La version textuelle se trouve ci-dessous :
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
Modèle de page de sujets
Modèle de page de sujets indiquant les parties qui composent sa structure. Lire de haut en bas et de gauche à droite. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

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

5 : Services et renseignements

Obligatoire

Énumère les sous-sujets et le contenu de destination liés au sujet actuel

  • Contenu
  • 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
  • Présentation
    • Cette composante se trouve à droite de « Services et renseignements ».

7 : Collaborateurs

Obligatoire

Liens menant aux institutions qui soutiennent le sujet

  • Contenu
  • 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
  • Présentation
    • Cette composante se trouve en dessous de « Ce que nous faisons ».

Exemples concrets

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 :

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 .

Diagramme de la façon de naviguer
Diagramme de la façon de naviguer vers les pages de sujets dans le site Canada.ca. La version textuelle se trouve ci-dessous :
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 :

2020-06-30 : une nouvelle version bêta de ce modèle a été ajoutée.

Détails de la page

Date de modification :