Alertes & Mise en valeur
Messages de statut, notifications, blocs de mise en valeur éditoriaux et bannières globales.
1. Statuts standards
Chaque statut intègre une icône SVG dédiée pour maximiser la lisibilité et le repérage visuel rapide.
Alertes de statut
Information consulaire : Le délai moyen de traitement des demandes est de 15 jours.
Enregistrement réussi : Votre pré-demande a bien été reçue.
Attention requise : Tout dossier incomplet sera systématiquement rejeté.
Erreur critique : Le paiement en ligne a échoué.
<div class="ml-alert ml-alert-info">
<div class="ml-alert-icon">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
<div class="ml-alert-content">
<strong>Information consulaire :</strong> Le délai moyen de traitement des demandes est de 15 jours.
</div>
</div>
<div class="ml-alert ml-alert-success">
<div class="ml-alert-icon">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
</div>
<div class="ml-alert-content">
<strong>Enregistrement réussi :</strong> Votre pré-demande a bien été reçue.
</div>
</div>
<div class="ml-alert ml-alert-warning">
<div class="ml-alert-icon">
<svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
</div>
<div class="ml-alert-content">
<strong>Attention requise :</strong> Tout dossier incomplet sera systématiquement rejeté.
</div>
</div>
<div class="ml-alert ml-alert-error">
<div class="ml-alert-icon">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
</div>
<div class="ml-alert-content">
<strong>Erreur critique :</strong> Le paiement en ligne a échoué.
</div>
</div>2. Blocs éditoriaux (.ml-callout)
Blocs à bordure gauche épaisse et fond teinté pour attirer l'attention du lecteur dans le flux d'un texte.
Callouts éditoriaux
Règle générale
La présence physique du demandeur est obligatoire pour la prise d'empreintes biométriques.
Conseil pratique (Mali Vert)
Nous vous recommandons de prendre rendez-vous au moins 2 mois avant l'expiration de votre titre.
<div class="ml-callout">
<div class="ml-callout-title">Règle générale</div>
La présence physique du demandeur est obligatoire pour la prise d'empreintes biométriques.
</div>
<div class="ml-callout ml-callout-green">
<div class="ml-callout-title">Conseil pratique (Mali Vert)</div>
Nous vous recommandons de prendre rendez-vous au moins 2 mois avant l'expiration de votre titre.
</div>3. Bandeau d'Information Global (.ml-notice-banner)
Bandeau pleine largeur affiché en haut d'un site pour transmettre un message prioritaire, une alerte de maintenance ou une annonce officielle à l'échelle nationale.
Bandeau d'information global
<!-- Bandeau d'information standard (Mali Vert) -->
<div class="ml-notice-banner">
<div class="ml-notice-banner__container">
<div class="ml-notice-banner__content">
<span class="ml-notice-banner__icon">
<i class="ml-icon-information-line"></i>
</span>
<span class="ml-notice-banner__text">
<strong>Information importante :</strong> Les services en ligne seront interrompus le dimanche 15 août de 02h à 06h pour maintenance. <a href="#" class="ml-notice-banner__link">En savoir plus</a>
</span>
</div>
<button type="button" class="ml-notice-banner__close" aria-label="Fermer le bandeau">×</button>
</div>
</div>
<!-- Variant Information Consulaire (River Blue) -->
<div class="ml-notice-banner ml-notice-banner--info">
<div class="ml-notice-banner__container">
<div class="ml-notice-banner__content">
<span class="ml-notice-banner__icon">
<i class="ml-icon-information-line"></i>
</span>
<span class="ml-notice-banner__text">
Ouverture de la campagne de renouvellement des cartes consulaires pour l'année 2026.
</span>
</div>
<button type="button" class="ml-notice-banner__close" aria-label="Fermer le bandeau">×</button>
</div>
</div>
<!-- Variant Alerte / Vigilance (Gold Amber) -->
<div class="ml-notice-banner ml-notice-banner--warning">
<div class="ml-notice-banner__container">
<div class="ml-notice-banner__content">
<span class="ml-notice-banner__icon">
<i class="ml-icon-error-warning-line"></i>
</span>
<span class="ml-notice-banner__text">
<strong>Vigilance :</strong> Soyez vigilants face aux tentatives de phishing ciblant les comptes d'usagers public.
</span>
</div>
<button type="button" class="ml-notice-banner__close" aria-label="Fermer le bandeau">×</button>
</div>
</div>
<!-- Variant Non Fermable (Sans bouton de fermeture) -->
<div class="ml-notice-banner ml-notice-banner--info">
<div class="ml-notice-banner__container">
<div class="ml-notice-banner__content">
<span class="ml-notice-banner__icon">
<i class="ml-icon-information-line"></i>
</span>
<span class="ml-notice-banner__text">
<strong>Annonce officielle :</strong> Bandeau d'information permanent (sans bouton de fermeture).
</span>
</div>
</div>
</div>