Composantes
Coordonnées
Dans cette page :
Le bloc de coordonnées sert à présenter des informations de contact telles que 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 ».
Au format bureau comme au format mobile, le bloc de coordonnées prend toute la largeur du bloc de contenu.
Certaines règles doivent être respectées 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.
Sept icônes sont permises, chacune appartenant à un type d’information.
Le personnage pour la personne-ressource
Le calendrier pour les jours ouvrables
L’horloge pour les heures d’ouverture
Le téléphone pour le numéro à joindre
La punaise pour l’adresse civique
L’enveloppe pour l’adresse courriel
La souris pour le site Web
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: 16px;
font-weight: bold;
color: #223654;
CSS du contenu
font-family: Open Sans;
font-size: 16px;
font-weight: regular;
color: #223654;
Dernière mise à jour : 30 août 2023