Conseils
Le composant de bandeau d’en-tête est une petite bannière pleine largeur qui figure au sommet d’un site Web ou d’une application Web. Il indique clairement qu’il s’agit d’une propriété officielle du gouvernement provincial. Ce composant est conçu pour être utilisé sur des sites Web qui ne sont pas hébergés sur le domaine gnb.ca ou qui n’utilisent pas l’image de marque officielle du GNB. Le bandeau d’en-tête contribue à inspirer la confiance, à faire valoir l’autorité et à offrir aux utilisateurs une expérience uniforme sur l’ensemble des sites Web associés au gouvernement provincial.
Les têtes de mât doivent être utilisés les situations suivantes :
- Le site web n'utilise pas la marque officielle du Gouvernement du Nouveau-Brunswick.
- Le site web n'est pas sur un domaine officiel du Gouvernement du Nouveau-Brunswick.
À faire
- Le composant tête de mât doit être placé tout en haut de la page, au-dessus de toute navigation ou contenu.
- Le composant tête de mât doit être présent sur toutes les pages du site web ou de l'application pour maintenir une expérience utilisateur cohérente.
À ne pas faire
- Ajouter des informations supplémentaires ou des éléments visuels.
- Modifier le texte, la couleur de fond ou la police, car cela entraînerait des incohérences avec la marque officielle.
Tête de mât
La tête de mât par défaut avec un fond vert devrait être votre premier choix, cependant d'autres options de couleur peuvent être utilisées si nécessaire.
HTML
<div class="gnb-masthead">
Un site web du <a href="https://www.gnb.ca">Gouvernement du Nouveau-Brunswick</a>.
</div>
Placement
La tête de mât doit être placée tout en haut de la page, au-dessus de toute navigation ou contenu pour assurer la visibilité et établir la légitimité et la crédibilité du site web ou de l'application. Placer la tête de mât en haut de la page aide également les utilisateurs utilisant des lecteurs d'écran ou d'autres technologies d'assistance à identifier plus facilement l'organisation et à comprendre le but du site web ou de l'application.
Tête de mât grise
La tête de mât avec un fond gris peut être utilisée lorsque vous nécessitez une option de couleur plus neutre.
HTML
<div class="gnb-masthead-gray">
Un site web du <a href="https://www.gnb.ca">Gouvernement du Nouveau-Brunswick</a>.
</div>
Tête de mât noire
La tête de mât avec un fond gris peut être utilisée lorsque vous avez besoin d'une option de couleur plus neutre et surtout si le site web ou l'application web utilise un thème sombre.
HTML
<div class="gnb-masthead-black">
Un site web du <a href="https://www.gnb.ca">Gouvernement du Nouveau-Brunswick</a>.
</div>