Communications numériques gouvernementales Beta

Système de design gouvernemental

Notes

Les notes apportent un complément d’information sans alourdir le texte. Par contre, elles ne sont pas indexées dans les moteurs de recherche externes.

Exemple

Quand les utiliser

Les notes définissent des termes juridiques, scientifiques et techniques. Elles peuvent aussi être utilisées pour donner la source d’un renseignement. Elles ne doivent pas servir à expliquer les sigles ou les abréviations.

À faire


À ne pas faire


Comment les utiliser

Expliquer les termes spécialisés par des mots simples est toujours l’option à privilégier. Le texte des notes doit être clair et concis et il ne doit pas reprendre des éléments du contenu principal. Une seule note peut être utilisée par terme.

Dans le format bureau, l’appel de note mène à la définition ou à la référence fournie au bas de la page. Lorsqu’on reclique sur le chiffre, la page remonte à la position de l’appel de note.

Dans le format mobile, une fenêtre de notification s’affiche au bas de l’écran pour fournir la définition ou la référence.

Informations techniques

Terme à définir

Le terme à définir comporte un soulignement pointillé ainsi qu’un numéro. Le numéro correspond à l’ordre d’apparition des notes dans le contenu de la page.

CSS du numéro des notes
Background-color : #dae6f0
Color : #095797
Font-size : 0.75rem
Font-weight : bold

CSS du terme défini
Color : #095797
Border-bottom : 1px dashed #095797

Lorsque la définition est placée sur une citation ou une source bibliographique, celle-ci est suivi d’un numéro mais n’est pas soulignée.

Exemple

Définition

Dans le format bureau, la définition du terme est placée en bas de la page et est précédée de son numéro de définition.

Exemple

CSS du numéro de la définition - 
par défaut

Color : #095797
Font-size : 0.875rem
Font-weight : bold
Text-decoration : none

CSS du numéro de la définition - 
Au survol

Color : #095797
Font-size : 0.875rem
Font-weight : bold
Text-decoration : underline

CSS de la définition
Color : #095797
Font-size : 0.875rem

Dans le format mobile, la définition du terme apparaît sous forme de fenêtre de notification et prend la largeur de l’appareil utilisé.

CSS de la fenêtre de notification
Background-color : #095797
Box-shadow : 1.5px 3px 10px 0 rgba(34, 54, 84, 0.16);

CSS de la définition
Color : #ffffff
Font-size : 1rem
Line-height : 1.375

Dernière mise à jour : 10 juillet 2020