1. Accueil  
  2. Design  
  3. Composants  
  4. Alerte générale

Alerte générale

L'alerte générale sert aux avertissements et messages de haute importance qui touchent l'ensemble de la population ou la grande majorité. Ces avertissements portent sur des délais à respecter ou des mesures à adopter, par exemple lors de situations d’urgence. Elle apparaît par défaut dans toutes les pages, directement sous le PIV et la navigation principale, et occupe la largeur de l’écran pour être très visible.

Exemple


Quand l'utiliser

Une alerte générale est utilisée pour les messages non contextuels qui communiquent une information essentielle. Par non contextuel, on entend une information que l’utilisateur ne cherche pas nécessairement, mais qui doit lui être communiquée maintenant.

Il existe deux types d’alertes :

L’alerte jaune, accompagnée d’une icône ⚠️, est utilisée pour les messages hautement prioritaires, comme une inondation. Sur Québec.ca, ce type d’alerte est utilisé lorsque le message touche plusieurs thématiques. Elle apparaît sur toutes les pages du site, sauf celle qui contient ledit message.

L’alerte bleue, accompagnée d’une icône ⓘ, est utilisée pour les messages moins prioritaires, comme la mise à jour des règlements sur la pêche. Sur Québec.ca, ce type d’alerte est utilisé lorsque le message est relatif à une thématique restreinte, donc à un public plus ciblé. Elle apparaît sur les pages de la thématique choisie.

Exemple


Comment l'utiliser

L’alerte jaune et l’alerte bleue peuvent contenir :

  • du texte courant (aucune autre mise en forme que le gras n'est possible);
  • des mots en gras et/ou en italique;
  • un lien textuel souligné.

Elles peuvent être permanentes ou masquables. Si la deuxième option est choisie, une icône de fermeture « X » est affichée dans le coin supérieur droit et permet à l’utilisateur de faire disparaître l’alerte pour une durée déterminée.

À faire



À ne pas faire



Afin que l’alerte n’occupe pas un trop grand espace dans l’écran (dans le format mobile surtout), le texte devrait comprendre entre 72 et 105 caractères pour les alertes masquables et entre 80 et 120 caractères pour les alertes persistantes.

Exemple


Informations techniques

Dimensions

L’alerte occupe toute la largeur de l’écran. Sa hauteur varie selon la quantité de contenu.

Espacements

Les éléments qui composent l’alerte (icônes et texte) doivent s'aligner sur les marges de la page. Il faut prévoir un dégagement vertical d’un minimum de 16 px lorsque la largeur de la fenêtre de navigation est réduite.

Pour l'alerte en format bureau, tous les éléments s’alignent verticalement avec le milieu de la boîte. Le dégagement horizontal est de 24 px. 

En format mobile, tous les éléments s’alignent verticalement avec le haut de la zone de texte. Le dégagement est de 16 px entre le contenu et les bords de l'alerte.

CSS du format bureau
font-family: Open Sans;
font-size: 16px;
font-weight: semibold;

CSS du format mobile
font-family: Open Sans;
font-size: 14px;
font-weight: semibold;

 

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