Bannières d’alerte critique

Utilisez une bannière d’alerte critique pour attirer l’attention d’un utilisateur sur une situation importante, telle qu’une interruption de service à l’échelle du site ou toute autre information critique qui aura une incidence sur la plupart des utilisateurs.

  • Contenu:
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    
    .ontario-critical-alert {
    	background-color: colours.$ontario-colour-warning;
    	font-weight: fontWeights.$ontario-font-weights-normal;
    	margin: spacing.$spacing-0;
    	padding: spacing.$spacing-4 spacing.$spacing-0;
    	position: relative;
    	z-index: 5;
    }
    
    .ontario-critical-alert__body {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-wrap: nowrap;
    	flex-wrap: nowrap;
    }
    
    .ontario-critical-alert__icon svg {
    	width: 28px;
    	height: 28px;
    	margin: spacing.$spacing-0 0.85rem spacing.$spacing-0 spacing.$spacing-0;
    }
    
    .ontario-critical-alert p {
    	margin: spacing.$spacing-0;
    	padding: spacing.$spacing-0;
    	line-height: 1.8;
    }
    
    .ontario-critical-alert a {
    	color: colours.$ontario-colour-black;
    	font-weight: fontWeights.$ontario-font-weights-bold;
    
    	&:hover,
    	&:focus {
    		text-decoration: none;
    	}
    
    	&:visited {
    		color: colours.$ontario-colour-black;
    	}
    }
    
  • URL: /components/raw/critical-alerts/critical-alerts.scss
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/critical-alerts/critical-alerts.scss
  • Taille: 1.5 KB
  • Contenu:
    .ontario-critical-alert{background-color:#ffd440;font-weight:400;margin:0;padding:1rem 0;position:relative;z-index:5}.ontario-critical-alert__body{display:flex;flex-wrap:nowrap}.ontario-critical-alert__icon svg{width:28px;height:28px;margin:0 .85rem 0 0}.ontario-critical-alert p{margin:0;padding:0;line-height:1.8}.ontario-critical-alert a{color:#1a1a1a;font-weight:700}.ontario-critical-alert a:hover,.ontario-critical-alert a:focus{text-decoration:none}.ontario-critical-alert a:visited{color:#1a1a1a}
  • URL: /components/raw/critical-alerts/critical-alerts.css
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/critical-alerts/critical-alerts.css
  • Taille: 504 Bytes

Quand utiliser cette composante

Les bannières d’alerte critique apparaissent généralement au-dessus de la barre d’en-tête globale et s’appliquent à l’ensemble du site ou de la section. Envisagez de les utiliser uniquement aux points de service ou de fourniture de renseignements visés, tels que les pages consacrées à l’initiation au service ou les pages de coordonnées. Utilisez-les avec parcimonie au-delà des points de prestation de services ou d’information pour éviter une exposition excessive à l’alerte.

N’oubliez pas de tenir compte de la quantité de contenu dans une bannière d’alerte critique. Comme elles apparaissent en haut de la page, elles peuvent avoir une incidence significative sur la visibilité d’autres contenus, notamment sur les petits écrans de téléphones portables. Utilisez un lien ou un appel à l’action pour orienter les utilisateurs vers de plus amples renseignements si nécessaire.


Pratiques exemplaires

À faire :

  • rédiger des titres concis et des contenus totalisant un maximum de 140 caractères
  • tenir compte de la hauteur de la bannière d’alerte critique qui apparaîtra sur les écrans des téléphones portables
  • afficher temporairement et ne les maintenir que pendant la durée de la crise
  • décrire les conséquences pour l’utilisateur

À ne pas faire :

  • cumuler les bannières d’alerte critique
  • utiliser les bannières d’alerte critique uniquement pour la mise en forme du contenu régulier (pour souligner ou mettre en évidence)
  • Utiliser plus d’un lien

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.