Communications numériques gouvernementales Beta

Système de design gouvernemental

Coordonnées

Le bloc de coordonnées sert à présenter le numéro de téléphone, l’adresse, le courriel et les heures d’ouverture d’un lieu ou d’un service.

Exemple


Quand l'utiliser

La composante s’utilise lorsqu’il y a des coordonnées à mettre en évidence dans la zone de contenu. L’utilisation la plus courante est l’affichage de coordonnées d’un ministère ou d’un organisme, mais le bloc peut aussi servir à présenter les informations pour s’inscrire à un programme ou obtenir de l’aide.

Comment l'utiliser

L’emplacement du bloc est strictement réservé à la zone de contenu et les coordonnées ne doivent pas être affichées dans la zone « À consulter aussi ».

Sur la version bureau comme sur la version mobile, le bloc de coordonnées prend toute la largeur du bloc de contenu.

Vous devez respecter certaines règles afin d’assurer une cohérence dans l’affichage des coordonnées.

  • Le titre par défaut est «Joindre le ministère (ou l’organisme) [nom du ministère (ou de l’organisme)]».
  • Le titre peut être modifié pour répondre à certains cas d’utilisation, par exemple: « Obtenir de l’aide » ou « Pour vous inscrire à ce programme ».
  • Le titre doit bien informer l’utilisateur de la nature des coordonnées affichées.

Cinq icônes sont permises, chacunes appartenant à un type d’information.

La punaise pour l’adresse civique

Le téléphone pour le numéro à joindre

L’enveloppe pour l’adresse courriel

L’horloge pour les heures d’ouverture

Le calendrier pour les jours ouvrables

Aucune autre information que celle mentionnée ne doit apparaître dans le bloc de coordonnées.

Informations techniques

Dimensions

Le dégagement haut et bas est de 24 px, et de 16 px à la gauche et à la droite.

Les icônes ont une dimension de 16 px.

Exemple


CSS de la boîte de coordonnées
Border : 1px solid #c5cad2

CSS du titre 
Font-family : Open Sans
Font-size : 16 px
Font-weight : bold
Color : #223654

CSS du contenu 
Font-family : Open Sans
Font-size : 16 px
Font-weight : regular
Color : #223654

Dernière mise à jour : 20 juillet 2020