Communications numériques gouvernementales Beta

Système de design gouvernemental

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 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 ou une pandémie. 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 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, un petit X au coin supérieur droit permettra à 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 de l'alerte

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 la version bureau de l’alerte, tous les éléments s’alignent verticalement avec le milieu de la boîte. Le dégagement horizontal est de 24 px. 

Pour la version mobile, tous les éléments s’alignent verticalement avec le haut de la zone de texte. Le dégagement horizontal est de 16 px.

Css de la version bureau
Font-family : Open Sans
Font-size : 16 px
Font-weight : semibold

CSS de la version mobile
Font-family : Open Sans
Font-size : 14 px
Font-weight : semibold

 

Dernière mise à jour : 22 juillet 2020