Exemples d’alerte GCWeb

Alertes avec titres

Code

<section class="alert alert-danger">
	<h3>Alerte de danger</h3>
	<p>Détails de l’alerte.</p>
</section>

<section class="alert alert-warning">
	<h3>Alerte d’avertissement</h3>
	<p>Détails de l’alerte.</p>
</section>

<section class="alert alert-success">
	<h3>Alerte de succès</h3>
	<p>Détails de l’alerte.</p>
</section>

<section class="alert alert-info">
	<h3>Alerte d’information</h3>
	<p>Détails de l’alerte.</p>
</section>

Liens dans les alertes

Code

<section class="alert alert-success">
<h3>(Titre de succès)</h3>
<p> Le contenu de succès va ici <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-info">
<h3>(Titre d’information)</h3>
<p> Le contenu d’information va ici <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-warning">
<h3>(Titre d’avertissement)</h3>
<p> Le contenu d’avertissement va ici <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-danger">
<h3>(Titre de danger)</h3>
<p> Le contenu de danger va ici <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

Alertes sans titre

Alerte de succès

Alerte d’information

Alerte d’avertissement

Alerte de danger

Code

<h3>Alerte de succès</h3>
<div class="alert alert-success">
	<p>(Contenu de succès ici.)</p>
</div>

<h3>Alerte d’information</h3>
<div class="alert alert-info">
	<p>(Contenu d’information ici.)</p>
</div>

<h3>Alerte d’avertissement</h3>
<div class="alert alert-warning">
	<p>(Contenu d’avertissement ici.)</p>
</div>

<h3>Alerte de danger</h3>
<div class="alert alert-danger">
	<p>(Contenu de danger ici.)</p>
</div>

Alerte avec développement et réduction

Utilisez une alerte avec développement et réduction lorsque vous devez afficher plusieurs alertes sur une même page. Chaque alerte n’affiche que son titre jusqu’à ce que l’utilisateur la développe, ce qui permet d’empiler les alertes en occupant moins d’espace.

Code

<section class="alert alert-warning">
	<details>
		<summary>
			<h3 class="h5">Méfiez-vous des fausses informations en ligne</h3>
		</summary>
		<p>Pour obtenir des renseignements exacts, consultez toujours les sites Web officiels du gouvernement du Canada et des provinces ou territoires.</p>
		<p>Consultez les <a href="#">plus récentes alertes d’arnaques</a> liées aux prestations et aux impôts.</p>
	</details>
</section>

<section class="alert alert-info">
	<details>
		<summary>
			<h3 class="h5">Prestation canadienne pour l’épicerie et les biens essentiels</h3>
		</summary>
		<p>(Contenu de l’alerte d’information.)</p>
	</details>
</section>

<section class="alert alert-success">
	<details>
		<summary>
			<h3 class="h5">Alerte de succès</h3>
		</summary>
		<p>Détails de l’alerte.</p>
	</details>
</section>

<section class="alert alert-danger">
	<details open>
		<summary>
			<h3 class="h5">Alerte de danger (développée par défaut)</h3>
		</summary>
		<p>Détails de l’alerte.</p>
	</details>
</section>