Note

La note, insérée à l’aide du code « Notice », met en évidence une action, un résultat ou un message. Voir l’aide-mémoire pour les paramètres.

Accessibilité

Chaque thème est associé à une couleur et à une icône par défaut pour indiquer le type et l’urgence du message.

  • Les couleurs respectent les normes AAA du WCAG sur les couleurs et les contrastes pour l’accessibilité et la lisibilité en mode clair et en mode sombre.
  • Le texte des hyperliens est souligné automatiquement.

Exemples

  • Action exécutée ou formulaire envoyé avec succès
  • Affiché sous l’action exécutée, ou à la place du formulaire lorsque l’action est exécutée avec succès
  • Icône par défaut : crochet dans un cercle
  • Élément d’information complémentaire, p. ex. prochaine étape ou pratique exemplaire
    • Pour un effet optimal : inclure une seule idée par note
  • Utiliser la voix passive lorsque le contexte s’y prête.
  • Habituellement placé dans le contenu ou après
  • Icône par défaut : ampoule
  • Message éphémère concernant la page
  • Habituellement placé sous le titre principal ou entre le chapeau et le contenu
  • Icône par défaut : document papier
  • Pour signaler une action non complétée dans un formulaire
  • Habituellement placé sous l’action non complétée
  • Icône par défaut : croix dans un cercle
  • Pour inviter le lecteur à s’arrêter et à lire avant de poursuivre
    • Pour un effet optimal : inclure une seule idée par note
  • Habituellement placé sous le titre principal ou dans le contenu
  • Icône par défaut : triangle d’alerte
  • Message de service concernant l’ensemble du site
  • Habituellement placé au-dessus du titre principal, sous le fil d’Ariane
  • Icône par défaut : clé
  • Lien vers de la documentation ou autre contenu
    • La composante est un lien en soi.
    • Pour un effet optimal, inclure seulement un appel à l’action et utiliser un verbe d’action clair.
  • Placé n’importe où dans le contenu
  • Icône par défaut : toucher du doigt

Paramètres

html_id
ID HTML de l’élément. Ajouter seulement si nécessaire pour personnaliser un style ou pour que Javascript exécute une fonction précise.
icon
Pour insérer une icône à gauche dans l’encadré de la note.
icon_override
Pour remplacer l’icône par défaut par une autre. Tous les choix doivent être soumis à un concepteur de l’équipe.
message
Message à afficher. Le contenu du code simplifié figure dans ce champ.
theme
Styles de la note (couleur et icône)
title
Ajout d’un titre formaté au-dessus du message
url_param
Paramètre utilisé en combinaison avec le paramètre « link » lorsqu’un ID de page ou de publication est défini.