1. Accueil  
  2. Design  
  3. Composants  
  4. Coordonnées

Coordonnées

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

Le composant 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 : 6 novembre 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec