Complément d’information

Dernière mise à jour : 10 février 2026

Le complément d’information fait ressortir visuellement un court contenu textuel qui mérite une attention particulière.

Utilisation

Le complément d’information est un composant statique qui met en évidence un fait intéressant, une astuce, des instructions ou tout autre contenu court à valoriser.

Image représentant l'anatomie d'un complément d'information
1. Titre
2. Texte

Principales règles

  • Utiliser le complément d’information avec modération pour maximiser son impact dans la page.

  • Un hyperlien peut être intégré au texte pour rediriger vers une page qui communique plus de détails.

  • Placer un complément d'information directement sous un titre de section ou un autre complément d'information.

  • Choisir ce composant pour communiquer une alerte ou un message important.

Variants possibles

Le complément d’information existe en deux variants dont l'utilisation est déterminée en fonction du contexte de mise en page.

Variant sans contour

Lorsque le complément d’information est placé directement sous un texte présenté en paragraphe, le variant sans contour est utilisé.

Image représentant un complément d'information sans contour

Variant avec contour

Placé après certains modules, le composant peut être délimité par un contour pour éviter qu’il flotte dans la page.

Image représentant un complément d'information avec contour

Placement

Le complément d’information n’occupe jamais une section à lui seul. Il est toujours relié au contenu principal de la page.

Il n’y a pas de nombre limite de compléments d’information à utiliser dans une même page, mais il importe de sélectionner avec soin les sujets méritant de se démarquer du reste du contenu. Si la page compte plus d’un complément d’information, ils doivent être disposés à une distance suffisante pour préserver leur impact visuel.

Quand envisager autre chose

  • Pour communiquer une information importante en lien avec le contenu de la page ou pour afficher une validation ou une erreur à la suite d'une action de l’utilisateur ou de l’utilisatrice, considérer l’avis.
  • Pour rapporter et mettre en évidence les propos d’une personne, choisir le module citation, qui se trouve dans la trousse de design (UI kit).
  • Pour promouvoir un service, une initiative, une action ou une offre, opter pour la bannière.

Rédaction UX

Le complément d’information étant de nature factuelle, il ne peut inclure de bouton principal ou de bouton texte communiquant un appel à l’action. Le contenu qu’il met en évidence doit être court, simple et précis.

Titre

  • Son titre doit capter l’attention en exposant brièvement la nature de l'information détachée du reste du contenu.

    Il peut prendre une forme plus générique, comme Le saviez-vous ? ou Astuce. Il peut aussi être plus précis en annonçant le sujet, par exemple Planter le bon arbre au bon endroit.

  • Limite de caractères : 25, espaces incluses.

Texte

  • Afin que le texte reste concis, un hyperlien peut être intégré pour rediriger vers une page ou d’autres ressources permettant d’approfondir le sujet abordé.

  • Par souci de lisibilité, l’emploi du gras, de l’italique et du soulignement à l’intérieur du texte est à éviter.

  • Limite de caractères (incluant l’hyperlien) : 400, espaces incluses.

Couleurs et styles

Le complément d’information s’adapte sur un arrière-plan de couleur claire ou foncée.

Image représentant un complément d'information sur un fond clair
Sur un arrière-plan de couleur claire.
Image représentant un complément d'information sur un fond foncé
Sur un arrière-plan de couleur foncée.

Personnalisation du complément d’information

Le composant existe en deux variants. Par défaut, le variant sans contour est utilisé. Toutefois, si le complément d’information semble flotter dans l’espace, le variant avec contour est l’option à choisir.

Image représentant un complément d'information sans contour
Par défaut, le complément d’information est sans contour.
Image représentant un complément d'information avec contour
Avec contour, le composant est délimité dans l’espace.

Spécifications

Voici les spécifications en pixels des espacements qui délimitent les différents éléments du complément d’information.

Image représentant les spécifications des espacements d'un complément d'information sans contour
Variant sans contour
Image représentant les spécifications des espacements d'un complément d'information avec contour
Variant avec contour

États interactifs

Si le complément d’information contient un hyperlien, les états interactifs de ce composant s’appliquent au niveau du lien seulement. Consulter les états interactifs de l’hyperlien.

Principes d'accessibilité

Le complément d’information est à la base composé d’un titre et d’un texte. La portion texte du composant peut inclure un hyperlien.

Interactions au clavier

Aucune interaction au clavier n’est prévue pour le complément d’information, sauf s’il contient un lien. Le cas échéant, consulter la section Interactions au clavier de l’hyperlien.

Interactions au lecteur d'écran

Le niveau hiérarchique du titre du complément d’information est établi selon la structure de la page dans laquelle il s’affiche. Il peut varier d’un niveau H2 à H5. Il est lu selon l’ordre séquentiel déterminé pour l’ensemble des titres de la page.

Si le complément d’information contient un hyperlien, ce dernier doit être annoncé comme un lien par le lecteur d’écran.