Bandeau d’en-tête du Programme d’identification visuelle
Le Bandeau d’en-tête du Programme d’identification visuelle est le premier élément visible dans le haut de chaque page. Il permet d'identifier le site et d'indiquer que celui-ci est un site officiel du gouvernement du Québec.
Le Programme d’identification visuelle (PIV) relève du Secrétariat du Conseil du trésor. Les normes concernant le PIV ainsi que la liste des répondants désignés se trouvent sur piv.gouv.qc.ca 
.
Les orientations suivantes ont été formulées en collaboration avec le responsable du Programme d’identification visuelle au Secrétariat du Conseil du trésor et l’application stricte, visuelle et fonctionnelle, est obligatoire.
Exemple
Quand l’utiliser
Tous les sites Web gouvernementaux doivent être identifiés à l’aide d’un bandeau d’en-tête. L’application du bandeau d’en-tête du Programme d’identification visuelle est obligatoire pour l’ensemble des sites publics informationnels et transactionnels ainsi que les extranets. Consultez le site piv.gouv.qc.ca pour plus d'informations.
Comment l’utiliser
Le bandeau d’en-tête du Programme d’identification visuelle est présent sur toutes les pages du site et il est le premier élément en haut de la page.
Le bandeau d’en-tête est composé des éléments suivants :
- la signature gouvernementale;
- le nom du site;
- la zone personnalisable;
- la barre de recherche (affichée sur demande).
Le bandeau d’en-tête n’est pas un menu de navigation. Les liens vers les pages et sections du site se trouvent dans le menu principal (fiche à venir), situé sous le bandeau d’en-tête.
La signature gouvernementale
La signature gouvernementale (logo du gouvernement du Québec) est toujours présente dans le bandeau. C'est le premier élément à gauche et elle ne peut être remplacée par un autre logo.
Nom du site
Le nom complet du site est toujours présent dans le bandeau. Le nom du site doit respecter les orientations de dénomination et références aux services.
Zone personnalisable
La zone personnalisable est optionnelle et se situe complètement à droite. Voici les éléments qui peuvent s’y retrouver :
- un lien de changement de langue;
- un lien « Nous joindre »;
- une icône de loupe.
Aucun autre élément ne peut être ajouté à cette section. Les menus cachés de type « hamburger » sont à proscrire, autant au format bureau que mobile.
Barre de recherche
Si une option de recherche est intégrée au site, une icône de loupe sera présente dans la zone personnalisable. Lorsque cet élément est cliqué, une barre de recherche est affichée en dessous.
Informations techniques
L'arrière-plan bleu #095797 du bandeau occupe toute la largeur de la fenêtre alors que le contenu du bandeau est aligné sur les marges de la page.
Marges bureau
Marges mobile
Éléments
La signature gouvernementale est cliquable et ouvre la page d'accueil de Québec.ca. Elle a une largeur de 200 px en format bureau et de 175 px en format mobile.
Le nom du site est cliquable et mène à la page d'accueil du site.
Le lien de changement de langue permet d'accéder au site dans une autre langue. Le libellé du lien est rédigé dans la langue de destination, par exemple, « English » pour accéder à la version anglaise du site. L’espace pour une seule langue est prévu dans le bandeau d’en-tête.
Le lien « Nous joindre » permet de contacter le ministère, l'organisme ou les personnes responsables du site.
L'icône de loupe fait 24 px par 24 px et permet d'afficher la barre de recherche.
CSS du nom du site
font-family: Roboto;
font-size: 16px;
line-height: 20px;
font-color: #ffffff;
CSS des liens dans la zone personnalisable
font-family: Roboto;
font-size: 12px;
line-height: 20px;
font-color: #ffffff;
Format bureau et format tablette
En format bureau et en format tablette, le nom du site est placé 64 px à droite de la signature gouvernementale.
Les éléments du bandeau (la signature, le nom du site et la zone personnalisable) sont centrés verticalement dans le bandeau.
La hauteur du bandeau est de 72 px par défaut. Si le nom du site est affiché sur trois lignes ou plus, la hauteur du bandeau doit s'ajuster afin que le dégagement vertical entre le bandeau et le nom du site soit de 16 px. Le nom du site et les autres éléments demeurent centrés verticalement.
Dimensions format bureau
Exemple avec un nom de site sur 3 lignes
Format mobile
En format mobile, la signature gouvernementale et la zone personnalisable sont centrées verticalement dans une zone de 72 px de haut alors que le nom du site est placé directement sous cette zone.
Le nom du site occupe toute la largeur du contenu et est aligné avec les marges de la page.
La hauteur du bandeau est ajustée afin de garder un dégagement vertical de 16 px sous le nom du site.
Dimensions format mobile
Barre de recherche
Une fois que l'icône de loupe dans la zone personnalisable est cliquée, la barre de recherche apparaît directement sous le bandeau. Elle n'est pas visible par défaut et peut être masquée à nouveau en cliquant sur l'icône de loupe.
La barre de recherche occupe toute la largeur du contenu et est alignée avec les marges de la page.
L'espace réservé contient le texte « Rechercher dans » suivi du nom de domaine du site en utilisant la bonne capitalisation.
Barre de recherche bureau
Survol
Au survol, le nom du site, le lien de changement de langue et le bouton libellé « Nous joindre » sont soulignés. La signature gouvernementale et l’icône de loupe n'ont pas d'état de survol.
CSS des éléments textuels au survol
text-decoration: underline;
Dernière mise à jour : 30 janvier 2024