Étiquettes: Système de conception de Canada.ca

  • Dernière modification : 2021-02-08

Les étiquettes sont des indicateurs visuels qui attribuent une étiquette à des items comme des événements, des produits, des programmes ou des services.

Défaut Primaire Succès Information Avertissement Danger

Sur cette page

Quand utiliser cette configuration

Utilisez des étiquettes dans les cas suivants :

Dans votre conception, assurez-vous que l'étiquette soit très proche de l'item auquel elle s'applique.

Quoi éviter

Comment mettre en oeuvre

Utilisez le bon type d'étiquette :

  1. Défaut
  2. Primaire
  3. Succès
  4. Information
  5. Avertissement
  6. Danger

1. Étiquette par défaut

Quand l'utiliser : pour donner des renseignements supplémentaires sur un item, commme ajouter des dates à une liste d'items.

Code
<a href="#">Évaluation du programme de citoyenneté</a> <span class="label label-default">Juillet 2020</span>

2. Étiquette primaire

Quand l'utiliser : pour transmettre une information importante sur un item, comme lorsqu'un nouveau programme n'est pas encore ouvert mais qu'il le sera bientôt.

Code
<h3 class="h5"><a href="#">Prestation canadienne de la relance économique (PCRE)</a> <span class="label label-primary">Ouvre le 12 octobre</span></h3>

3. Étiquette de succès

Quand l'utiliser : pour signaler qu'un item est ouvert, disponible ou approuvé.

Protection de l’eau douce au Canada Ouverte – Avis acceptés

Code
<p><a href="#">Protection de l’eau douce au Canada</a> <span class="label label-success">Ouverte – Avis acceptés</span></p>

4. Étiquette d'information

Quand l'utiliser : pour étiquetter un item avec une catégorie, comme pour identifier un nouvel article de blogue. Les étiquettes indiquant qu'un item est nouveau devraient être temporaires.

Code
<h3 class="h5"><a href="#">Étude sur les étiquettes : quels mots fonctionnent le mieux</a> <span class="label label-info">Nouveau</span></h3>

5. Étiquette d'avertissement

Quand l'utiliser : lorsque vous voulez attirer l'attention sur un élément pour avertir les gens d'un changement, comme lorsqu'un programme se termine bientôt.

Code
<h3 class="h5"><a href="#">Prestation canadienne d’urgence (PCU)</a> <span class="label label-warning">Bientôt fermée</span></h3>

6. Étiquette de danger

Quand l'utiliser : lorsqu'un item n'est plus disponible, comme lorsqu'un programme est terminé ou qu'une zone est fermée.

Code
<h3 class="h5"><a href="#">Prestation canadienne d’urgence (PCU)</a> <span class="label label-danger">Fermée</span></h3>

Recherche et blogue

Nous avons testé avec succès l'utilisation des étiquettes pendant la période de transition entre la Prestation canadienne d'urgence et les nouvelles prestations qui l'ont remplacée. L'ajout d'étiquettes aux différents programmes sur la page de thème a permis aux gens de comprendre plus facilement ce qui leur était offert.

Derniers changements

Ajout de la documentation pour les étiquettes dans le système de conception

Discussion

Discuter de cette configuration dans GitHub

Avez-vous trouvé ce que vous cherchiez?

Qu’est-ce qui n’allait pas?

Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés.
Maximum de 300 caractères

Merci de vos commentaires

Date de modification :