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

    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

    É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