Pages d'accueil institutionnelle - Modèle obligatoire de Canada.ca

Obligatoire

Utilisez ce modèle comme page d'accueil pour les nstitutions et organismes du gouvernement du Canada.

Le but de cette page est de permettre aux gens de trouver les renseignements et les services offerts par cette institution, en se concentrant sur les tâches les plus importantes.

Il devrait également permettre aux gens de truver tous les autres contenus appartenant à cette institution, y compris :

Sur cette page

Quand l'utiliser

Toutes les institutions et les organismes du gouvernement du Canada assujetties à la Directive sur la gestion des communications doivent utiliser ce modèle comme page d'accueil.

Consultez la liste d'institutions de Canada.ca pour la liste complète.

Quoi éviter

N'utilisez ce modèle que comme page d'accueil des institutions et organismes officiels de la liste d'institutions de Canada.ca.

N'utilisez pas ce modèle pour des programmes ou entités spécifiques qui ne sont pas des institutions ou organismes officiels du gouvernement du Canada.

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 d'accueil institutionnelle

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 d'accueil institutionnelle

Modèle avec directives

Code
HTML
                      
<div class="provisional bg-cover bg-right bg-hide-sm bg-hide-xs mrgn-tp-md pb-3" data-bgimg="put your image link here">
				<div class="container">
					<div class="row">
						<div class="col-md-7">
							<h1 property="name" id="wb-cont">[Nom de l'institution]</h1>
							<p>Brève description du mandat de l'institution</p>
							<a class="provisional btn btn-call-to-action" href="#">Bouton vers une super-tâche [facultatif]</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<section class="provisional gc-featured-lnk">
				<div class="container">
					<h2 class="wb-inv">Lien en vedette</h2>
					<a class="h5" href="#">Lien en vedette [facultatif]</a>
				</div>
			</section>
			<section class="provisional most-requested-bullets well well-sm brdr-0">
				<div class="container">
					<div class="row">
						<div class="pddng-r-0 col-md-2">
							<h2 class="mrgn-tp-md">En demande</h2>
						</div>
						<div class="col-md-10">
							<ul class="wb-eqht mrgn-tp-md mrgn-bttm-md colcount-md-2">
								<li><a href="#">[Lien vers une tâche principale]</a></li>
								<li><a href="#">[Lien vers une tâche principale]</a></li>
								<li><a href="#">[Lien vers une tâche principale]</a></li>
								<li><a href="#">[Lien vers une tâche principale]</a></li>
								<li><a href="#">[Lien vers une tâche principale]</a></li>
								<li><a href="#">[Lien vers une tâche principale]</a></li>
							</ul>
						</div>
					</div>
				</div>
			</section>
			<section class="gc-srvinfo col-md-12 mrgn-bttm-lg">
				<div class="container">
					<div class="row">
						<h2 class="wb-inv">Services et renseignements</h2>
						<div class="wb-eqht">
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[Texte de l'hyperlien]</a></h3>
								<p>Utilisez une formulation basée sur l'action, ou faites simplement une les des mots-clés qui résument les renseignements disponibles ou des tâches pouvant être accomplies sur la page liée.</p>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</section>
			<div class="clearfix"></div>
			<section class="well well-sm brdr-0 mrgn-bttm-0">
				<div class="container">
					<div class="wb-eqht">
						<h2 class="h3 mrgn-tp-md">Coordonnées</h2>
						<ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-3">
							<li><a href="#">Communiquer avec [institution]</a></li>
							<li><a href="#">[Tâche de contact 2]</a></li>
							<li><a href="#">[Tâche de contact 3]</a></li>
						</ul>
					</div>
					<div class="row">
						<section class="col-md-8 pull-left mrgn-bttm-lg">
							<h2 class="h3 mrgn-tp-md">À propos de [Institution]</h2>
							<ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2">
								<li><a href="#">Mandat</a></li>
								<li><a href="#">Structure organisationnelle</a></li>
								<li><a href="#">Transparence</a></li>
								<li><a href="#">Possibilités d'emploi</a></li>
								<li><a href="#">Rapports</a></li>
								<li><a href="#">Observation</a></li>
								<li><a href="#">Avis de mesure d'exécution</a></li>
								<li><a href="#">[Lien institutionnel]</a></li>
								<li><a href="#">[Lien institutionnel]</a></li>
								<li>More: <a href="#">Au sujet de [institution]</a></li>
							</ul>
						</section>
						<div class="provisional col-md-4 col-sm-5 pull-right xs-left">
							<section class="lnkbx">
								<h2 class="h3">Ministre</h2>
								<p>
									<a href="#">[(L'honorable) prénom et nom de famille]</a><br>
									<small>Titre officiel du ministre</small>
								</p>
								<p>
									<a href="#">[(L'honorable) prénom et nom de famille]</a><br>
									<small>Titre officiel du ministre</small>
								</p>
								<p>
									<a href="#">[(L'honorable) prénom et nom de famille]</a><br>
									<small>Titre officiel du ministre</small>
								</p>
							</section>
							<section class="provisional followus">
								<h2 class="mrgn-tp-lg h3">Suivezs</h2>
								<ul>
									<li><a href="#" class="facebook" rel="external"><span class="wb-inv">Facebook</span></a></li>
									<li><a href="#" class="twitter" rel="external"><span class="wb-inv">Twitter</span></a></li>
									<li><a href="#" class="youtube" rel="external"><span class="wb-inv">YouTube</span></a></li>
									<li><a href="#" class="linkedin" rel="external"><span class="wb-inv">LinkedIn</span></a></li>
								</ul>
							</section>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</section>
			<div class="container">
				<div class="row">
					<section class="col-md-4 wb-feeds limit-3 gc-nws">
						<h2 class="h3">Nouvelles</h2>
						<!-- démonstration de l'apparence - utiliser le flux json le cas échéant -->
						<ul class="feeds-cont list-unstyled lst-spcd feed-active">
							<li><a href="#">[Titre de nouvelle]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
							<li><a href="#">[Titre de nouvelle]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
							<li><a href="#">[Titre de nouvelle]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
						</ul>
						<!-- exemple de flux json pour les nouvelles
						<ul class="feeds-cont list-unstyled lst-spcd">
							<li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Canada Revenue Agency news items</a> </li>
						</ul>-->
						<p>En savoir plus :<a href="#" class="admin">Nouvelles de [Institution]</a></p>
					</section>
					<section class="col-md-8 gc-prtts">
						<h2 class="h3">En vedette</h2>
						<div class="row wb-eqht gc-srvinfo">
							<div class="col-sm-6">
								<div class="well well-sm brdr-rds-0 eqht-trgt">
									<img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt="">
									<h3 class="h5"><a href="#" class="stretched-link">[Hyperlien de l'élément]</a></h3>
									<p>Brève description de l'élément en vedette.</p>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="well well-sm brdr-rds-0 eqht-trgt">
									<img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt="">
									<h3 class="h5"><a href="#" class="stretched-link">[Hyperlien de l'élément]</a></h3>
									<p>Brève description de l'élément en vedette.</p>
								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
                    
CSS
                    
.provisional.bg-cover {
	background-size: cover;
}

.provisional.bg-right {
	background-position: right;
}

.provisional.pb-3 {
	padding-bottom: 15px;
}

.provisional.btn-call-to-action {
	font-size: 1em;
}

.provisional.gc-featured-lnk {
	background: #31708f;
	margin-bottom: 0em;
	padding-top:20px;
	padding-bottom:20px;
}

.provisional.gc-featured-lnk a {
	color:#fff
}

ul.feeds-cont li a {
	font-weight: bold;
}

.provisional.most-requested-bullets li {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
	padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
	font-size: 1.2em;
}

.provisional.list-bld {
	font-weight: 600;
}

.provisional.followus h2 {
	font-size: 1.1em;
	margin-top: 10px;
}

.provisional.followus {
	padding: 0;
}

.provisional.followus h2 {
	display: block;
}

.provisional.followus h2,
.provisional.followus ul {
	margin-left: 0;
}

.provisional.followus-vertical {
	line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
	background-color: transparent;
}

.provisional.followus-vertical a {
	text-decoration: none;
}

.provisional.followus-vertical ul {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	padding-inline-start: 1em;
	font-size: 16px;
	margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
	margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
	margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
	border: none;
	padding: 0px 5px;
}

.provisional.followus ul li a {
	border: none;
}

.provisional .social-lnk {
	position: relative;
	bottom:-18px;
	left:45px;
}

.provisional.followus-vertical li {
	display: block;
	background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram,
.provisional.followus .linkedin {
	display: block;
	height: 38px;
	width: 38px;
}
/* supprimez cette section si vous ne voulez pas les nouvelles icônes */

.provisional.followus .facebook {
	background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
	background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
	background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
	background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
	background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* fin des nouvelles icônes de réseaux sociaux */

@media screen and (max-width: 767px) {
	.provisional.bg-hide-xs {
		background-image: url("none") !important;
	}

	.provisional.btn-call-to-action {
		font-size: .9em;
	}

	.provisional.xs-left {
		float: left !important;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.provisional.bg-hide-sm {
		background-image: url("none") !important;
	}
}

                    
                  

Version stable de la page d'accueil institutionnelle

La version stable sera éventuellement remplacée par la version bêta.

Directives pour la version stable de la page d'accueil institutionnelle

Page de profil

Toutes les institutions mentionnées aux annexes I, I.1 et II de la Loi sur la gestion des finances publiques (LGFP) doivent élaborer un profil institutionnel. Tous ces profils font partie de la page des ministères et organismes (voir la section sur la page des ministères et organismes).

Modèle de la page de profil institutionnel
Modèle de la page de profil institutionnel pour les grandes institutions 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 : Nom de l’institution

Obligatoire

Fournit le titre d’usage de l’institution

  • Contenu
    • Utilisez le titre d’usage de l’institution indiqué dans le Registre des titres d’usage.
    • Utilisez le titre légal si le titre d’usage n’est pas disponible.
    • N’utilisez pas d’acronymes ou d’abréviations.
  • Présentation
    • Le titre du profil institutionnel doit être une balise H1 unique.
    • Il doit être la première composante de la page.

2a : Insigne

Conditionelle

Fournit l’identification de la Gendarmerie royale du Canada

  • Contenu
    • Seule la Gendarmerie royale du Canada peut utiliser cette composante pour afficher son insigne approuvé.
  • Présentation
    • L’insigne se trouve à la droite du mandat de l’institution.
    • L’image n’est pas assortie d’un hyperlien.

3 : Mandat de l’institution

Obligatoire

Décrit en une ou deux phrases le mandat de l’institution

  • Contenu
    • Elle fournit le titre d’usage de l’institution suivi d’un aperçu en langage clair de la façon dont l’institution assure des services au public.
    • 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
    • Le mandat de l’institution figure juste au-dessous du titre de la page du profil institutionnel.

4 : Réseaux de médias sociaux de l’institution

Conditionelle

Présente les réseaux de médias sociaux propres à l’institution

5 : Nouveautés

Conditionelle

Présente les nouvelles ayant trait à l’institution

  • Contenu
    • Cette composante est obligatoire pour toutes les institutions mentionnées à l’annexe I de la LGFP, et facultative pour les autres institutions.
    • Utilisez la configuration Nouveautés.
  • Présentation
    • Cette composante se trouve sous « Réseaux de médias sociaux de l’institution ».

6 : Services et renseignements

Obligatoire

Dresse la liste des sujets propres à l’institution

  • Contenu
  • Présentation
    • Cette composante se trouve sous la section « Réseaux de médias sociaux » et à gauche de la section « En demande ».

7 : En demande

Conditionelle

Présente les services et renseignements les plus demandés propres à l’institution

  • Contenu
    • composante est obligatoire afin fournir des raccourcis vers les tâches les plus importantes de l'institution. Cependant, elle ne devrait pas être utilisée si toutes les tâches principales de l'institution sont déjà incluses en tant que liens directs sous « Services et renseignements ».
    • Utilisez la configuration En demande.
  • Présentation
    • Cette composante figure à droite de la section « Services et renseignements ».

8 : Contactez-nous

Obligatoire

Donne accès aux coordonnées de l’institution

  • Contenu
    • Allez à Coordonnées dans les Configurations de conception communes. Utilisez, selon le cas, le modèle d’adresse ou le modèle de lien.
  • Présentation
    • Cette composante est placée sous « Nouveautés » et à droite de « Services et renseignements ».

9 : Autres renseignements pour les

Facultative

Liens menant à des renseignements intéressant divers publics cibles

10 : Ce que nous faisons

Conditionelle

Fournit des liens vers le contenu relatif à l’élaboration des politiques et programmes de l’institution

  • Contenu
    • Cette composante est obligatoire quand l’institution a du contenu d’élaboration de programmes et de politiques à présenter.
    • Utilisez la configuration Ce que nous faisons.
  • Présentation
    • Cette composante figure sous la section « Services et renseignements ».

11 : Renseignements organisationnels

Obligatoire

Fournit un accès uniforme aux principaux renseignements organisationnels

  • Contenu
    • Cette composante consiste en une série de liens menant au contenu propre à l’institution qui n’est pas présenté ailleurs sur la page.
    • L’étiquette de l’en-tête est « Renseignements organisationnels ».
    • Seuls les liens « Mandat » et « Transparence » sont obligatoires; tous les autres liens sont facultatifs.
    • Les liens doivent être étiquetés et ordonnés de la façon suivante :
      Mandat
      • Obligatoire
      • Mène à une page présentant le mandat, la vision et les objectifs de l’institution
      Programmes
      • Facultatif
      • Mène à une page fournissant la liste des programmes de l’institution
      Structure organisationnelle
      • Facultatif
      • Mène à une page présentant l’organigramme ou la structure organisationnelle de l’institution
      Portefeuille
      • Facultatif
      • Mène à une page présentant le portefeuille ministériel de l’institution
      Partenaires
      • Facultatif
      • Mène à une page présentant les partenariats officiels de l’institution (c’est-à-dire des organisations fédérales, provinciales, territoriales, internationales ou non gouvernementales)
      Transparence
      • Obligatoire
      • Mène aux renseignements sur la transparence propres à l’institution prescrits par le Secrétariat du Conseil du Trésor, comme les plans prospectifs de la réglementation et la divulgation proactive
      Possibilités d’emploi
      • Facultatif
      • Mène à une page cible présentant les possibilités d’emploi au sein de l’institution
      Compte rendu du rendement des services
  • Présentation
    • Cette composante est affichée au-dessus de la section « En vedette ».

12a : Ministre d’un ministère ou chef d’une institution quasi judiciaire sans lien de dépendance

Conditionelle

Fournit le profil de chaque ministre ou chef d’institution

  • Contenu
    • Cette composante est obligatoire pour toutes les institutions, sauf si vous utilisez la composante Ministres du portefeuille (12b).
    • Elle fournit des images assorties d’hyperliens menant soit au(x) ministre(s) de l’institution (y compris les ministres associés), soit au chef de l’institution (dans le cas des institutions indépendantes ou quasi judiciaires).
    • Les images et les textes sont assortis d’un hyperlien menant à la page de profil ministériel pertinente (voir les pages de profil des ministres).
    • Le texte de l’hyperlien se limite au titre honorifique (« L’honorable ») et aux prénom et nom du ou de la ministre ou du chef de l’institution.
    • Le texte non assorti d’un hyperlien se limite au titre officiel du ministre ou du chef de l’institution.
    • Les en-têtes suivants doivent être présentés au-dessus du fonctionnaire élu approprié :
      • « Ministre »
      • « Secrétaire parlementaire »
      • « Ministre associé »
    • L’en-tête « Direction » ou « Ombudsman » doit être présenté, au besoin, au-dessus du haut fonctionnaire qui est le chef de l’institution.
  • Présentation
    • Cette composante figure à droite de «Renseignements organisationnels ».
    • Les sujets sont présentés en ordre de priorité, de gauche à droite.
    • Lorsque plus de trois images sont requises, continuez sur une deuxième ligne.
    • Lorsque moins de trois images sont requises, l’image doit être justifiée à gauche de la section « Renseignements organisationnels ».
    • Consultez la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

13 : Section « En vedette » de l’institution

Facultative

Fait la promotion des activités en cours de l’institution et menées par celle-ci

  • Contenu
  • Présentation
    • L’étiquette de l’en-tête est « En vedette ».

Comment utiliser l'identification d’un organisme indépendant

Modèle d’identification indépendante
Image de l’identification indépendante indiquant les composants de 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.

2b : Image de marque de l’organisme indépendant

Conditionelle

Affiche l’identificateur approuvé des institutions qui satisfont aux critères d’indépendance

  • Contenu
    • Cette composante est conditionnelle. Seules les institutions qui font partie de la catégorie des tribunaux administratifs selon les règles sur les nominations par le gouverneur en conseil ont l’option d’afficher leur identificateur d’image de marque approuvé.
    • Les institutions faisant partie de la catégorie des agences et conseils qui ont pour mandat de rendre des décisions exécutoires peuvent aussi avoir l’option d’afficher leur identificateur d’image de marque approuvé, tel que déterminé au cas par cas par les organismes centraux.
    • L’image de marque doit être conforme aux règles du Programme de coordination de l’image de marque (PCIM) sur l’identification des institutions fédérales.
  • Présentation
    • L’image de marque figure en haut de la page.
    • Elle doit être formatée conformément aux spécifications de conception du PCIM, s’il y a lieu (cela s’applique aux institutions qui ne sont pas exemptées du PCIM).
    • Elle doit être configurée de manière à s’adapter automatiquement à la taille de l’écran (SVG est le format recommandé), conformément aux principes de conception adaptée.
    • L’image n’est pas assortie d’un hyperlien.

3a : Énoncé de l’organisme indépendant

Conditionelle

Explique la nature indépendante de l’institution

  • Contenu
    • Cette composante est conditionnelle. Seules les institutions qui font partie de la catégorie des tribunaux administratifs selon les règles sur les nominations par le gouverneur en conseil ont l’option d’afficher l’énoncé d’indépendance.
    • Les institutions faisant partie de la catégorie des agences et conseils qui ont pour mandat de rendre des décisions exécutoires peuvent aussi avoir l’option d’afficher cet énoncé, tel que déterminé au cas par cas par les organismes centraux.
    • Cet énoncé fournit une brève explication de la nature autonome de l’organisme indépendant.
  • Présentation
    • Il figure en caractères gras.

Comment utiliser la configuration « ministres du portefeuille »

Composant des ministres de portefeuille
Image du composant des ministres de portefeuille indiquant les éléments 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.

12b : Ministres du portefeuille

Facultative

Donne accès aux profils de tous les ministres du portefeuille de l’institution

  • Contenu
    • Il ne faut pas utiliser cette composante lorsqu’un seul ministre ou chef institutionnel est mentionné sous « Renseignements sur l’organisation ».
    • Elle ne peut être utilisée que lorsqu’au moins trois ministres sont présentés.
    • Elle fournit des images des ministres de l’institution, assorties d’hyperliens.
      • Aucune photographie d’une autre personne ne peut être affichée sur le profil institutionnel.
    • Les images et les textes sont assortis d’un hyperlien menant à la page de profil ministériel pertinente (voir la section sur les pages de profil des ministres).
    • Le texte de l’hyperlien se limite aux titre honorifique, prénom et nom du ministre : L’honorable [nom du ministre].
    • Le texte non assorti d’un hyperlien se limite au titre officiel des ministres.
  • Présentation
    • Cette composante figure au-dessus de «Renseignements organisationnels ».
    • Les sujets sont présentés en ordre de priorité, de gauche à droite.
    • Lorsque plus de trois images sont requises, continuez la liste sur une deuxième ligne.
    • Consultez la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

Comment utiliser la configuration « organismes du portefeuille »

Composant des organisations de portefeuille
Image du composant des organisations de portefeuille indiquant les éléments 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.

14 : Organismes du portefeuille

Facultative

Fournit des liens vers les organismes relevant du portefeuille de l’institution

  • Contenu
    • Elle présente une liste de tous les organismes relevant du portefeuille de l’institution.
    • L’étiquette de l’en-tête est « Organismes du portefeuille ».
    • Les liens doivent mener à une page de profil organisationnel (voir les pages de profil organisationnel).
  • Présentation
    • Cette composante figure sous « Ce que nous faisons ».

Recherche

L'utilisation de la version bêta de la page d'accueil institutionnelle a été testée dans le cadre de 2 projets d'optimisation réalisés avec du contenu de l'Agence de revenu du Canada.

Résumé de recherche : Communiquer avec l’ARC

Derniers changements

2020-07-23 :

  • Révision du code frontal, créant des changements à l'ensemble du HTML/CSS
  • Supprimer l'opacité du lien présenté pour le contraste
  • Améliorations de la mise en page de l'image de fond

2020-07-13 :

  • Modifications apportées pour résoudre les problèmes d'accessibilité
  • La section « En demande » a té mise à jour pour utiliser des puces
  • Modifications à la disposition des colonnes de la section Services et renseignements pour les tablettes

2020-03-05 : ajouté une classe CSS facultative pour masquer l'image d'en-tête en mode tablette

2019-11-28 : une nouvelle version bêta de ce modèle a été ajoutée.

Discussion

Discutez de ce modèle dans GitHub

Date de modification :