Alertes contextuelles - Configuration de conception de Canada.ca

De : Secrétariat du Conseil du Trésor du Canada

Les alertes sont des avis présentant de nouveaux renseignements importants qui doivent apparaître dans la page.

Sur cette page

Quand l'utiliser

Utilisez les alertes contextuelles pour :

  • attirer l'attention d'une personne sur un changement important au niveau de la page ou de la sous-section, comme une panne de service ou de site, des changements récents dans un processus ou un service
  • fournir le résultat d'une action de l'utilisateur, par exemple, confirmer le succès ou aviser une personne d'une erreur
  • avertir une personne d'une conséquence d'une action ou d'une inaction liée à sa tâche

Pour utiliser des alertes contextuelles en temps de crise, suivez ces lignes directrices :

Quoi éviter

N’utilisez pas les alertes contextuelles :

  • pour fournir des renseignements à propos d’une étape normale d’un processus ou d’une tâche
  • simplement pour insister sur un élément de contenu
  • dans les cas où un avertissement n’est ni à risque élevé ni fréquent
  • pour créer des étiquettes ou des pilules. Utilisez plutôt ces composantes :

Comment mettre en œuvre

Le contenu est rédigé afin d’atteindre un auditoire ayant un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius).

Situer l’alerte dans le contexte approprié :

Vise l'ensemble du site
Placez-la en haut de la page, au-dessus de l’en-tête principal.
Vise la page
Placez-la en dessous de l’en-tête de la page.
Vise une sous-section de la page
Placez-la à l’endroit qui convient le mieux à l’intérieur de cette sous-section, généralement sous l’en-tête de la sous-section ou entre deux paragraphes.

Vous pouvez utiliser soit la version bêta ou la version stable de cette composante.

Alertes contextuelles bêta

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 à terme la version stable.

Vous devrez appliquer les CSS provisiores pour utiliser cette version bêta.

Utiliser la composante bêta pour les alertes contextuelles

Alerte de danger

Utilisation : Utilisez l’alerte de danger pour attirer l’attention sur une situation qui pourrait mettre une personne en danger, comme un avertissement de ne pas voyager. Vous pouvez aussi l'utiliser pour aviser une personne d’un problème technique qui pourrait l’empêcher d’accomplir sa tâche, comme une soumission de données invalide dans un formulaire.

Si vous êtes enceinte ou envisagez de concevoir un enfant – Avis concernant les deux partenaires

Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez concevoir un enfant au cours des trois prochains mois.

Code
HTML
											<section class="provisional alert alert-danger">
  <h3>Si vous êtes enceinte ou envisagez de concevoir un enfant – Avis concernant les deux partenaires</h3>
  <p>Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez concevoir un enfant au cours des trois prochains mois.</p>
</section>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-danger {
  border-color: #d3080c;
  border-image: linear-gradient(to bottom, #d3080c 16px, #d3080c 16px, transparent 16px, transparent 48px, #d3080c 48px, #d3080c 48px) 1 100%;
}
.provisional.alert-danger::before {
  color: #d3080c;
  content: "\e101";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-danger > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

Alerte d’avertissement

Utilisation : Utilisez l’alerte d’avertissement pour attirer l’attention sur une conséquence possible d’une action ou d’une inaction, comme une sanction légale qui pourrait s’appliquer.

Modifications aux lois sur la conduite avec facultés affaiblies et la criminalité liée au cannabis

Les nouvelles peines pour conduite avec facultés affaiblies et infractions liées au cannabis pourraient avoir une incidence sur votre statut d’immigrant au Canada. Si vous commettez l’un de ces crimes, vous ne pourrez peut-être pas venir au Canada ou y rester.

Code
HTML
											<section class="provisional alert alert-warning">
  <h3>Modifications aux lois sur la conduite avec facultés affaiblies et la criminalité liée au cannabis</h3>
  <p><a href="https://www.canada.ca/fr/immigration-refugies-citoyennete/nouvelles/avis/peines-conduite-affaiblies-cannabis-incidence-statut-immigrant.html">Les nouvelles peines pour conduite avec facultés affaiblies et infractions liées au cannabis pourraient avoir une incidence sur votre statut d’immigrant au Canada</a>. Si vous commettez l’un de ces crimes, vous ne pourrez peut-être pas venir au Canada ou y rester.</p>
</section>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-warning {
  border-color: #ee7100;
  border-image: linear-gradient(to bottom, #ee7100 16px, #ee7100 16px, transparent 16px, transparent 48px, #ee7100 48px, #ee7100 48px) 1 100%;
}
.provisional.alert-warning::before {
  color: #ee7100;
  content: "\e107";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-warning > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

Alerte d’information

Utilisation : Utilisez l’alerte d’information pour attirer l’attention sur une précision concernant le contenu environnant, comme le nombre de semaines pour recevoir un remboursement quand une demande est effectuée par courrier ou par téléphone.

État actuel de l’appel de candidatures : Fermé

Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé.

Code
HTML
											<section class="provisional alert alert-info">
  <h3>État actuel de l’appel de candidatures : Fermé</h3>
  <p>Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé.</p>
</section>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-info {
  border-color: #269abc;
  border-image: linear-gradient(to bottom, #269abc 16px, #269abc 16px, transparent 16px, transparent 48px, #269abc 48px, #269abc 48px) 1 100%;
}
.provisional.alert-info::before {
  color: #269abc;
  content: "\e086";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-info > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

Alerte de succès

Utilisation : Utilisez l’alerte de succès pour attirer l’attention sur une action fructueuse, comme la validation du formulaire ou l'accomplissement d'une tâche.

Votre demande de données accessibles au public à partir de la liste des organismes de bienfaisance a été acceptée.

Le délai de traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements.

Code
HTML
											<section class="provisional alert alert-success">
  <h3>Votre demande de données accessibles au public à partir de la liste des organismes de bienfaisance a été acceptée.</h3>
	<p>Le délai de traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements.</p>
</section>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-success {
  border-color: #278400;
  border-image: linear-gradient(to bottom, #278400 16px, #278400 16px, transparent 16px, transparent 48px, #278400 48px, #278400 48px) 1 100%;
}
.provisional.alert-success::before {
  color: #278400;
  content: "\e084";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-success > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

Alertes contextuelles stables

La version bêta remplacera à terme la version stable.

Utiliser la composante stable pour les alertes contextuelles

Exemple

Configuration d’« Alertes contextuelle »
Capture d’écran illustrant le modèle des alertes contextuelles dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Discussion

Discuter de la composante sur la page des problèmes techniques de Github

Date de modification :