Ensemble de styles typographiques et de mise en page pour la publication de communiqués de presse, actualités administratives et articles de fond.
Le conteneur .ml-article limite la largeur à 720px pour maintenir un confort de lecture optimal (environ 75-80 caractères par ligne). L'en-tête regroupe les métadonnées de publication.
Le Consulat général du Mali à Lyon annonce la mise en service de nouveaux outils numériques pour réduire les délais de traitement.
Dans le cadre de la modernisation de nos services publics, plusieurs ajustements ont été effectués pour simplifier la vie des usagers de la diaspora...
<article class="ml-article">
<header class="ml-article-header">
<div class="ml-article-meta">
<span class="ml-badge ml-badge-info">Communiqué</span>
<time datetime="2026-07-19">19 juillet 2026</time>
<span>Lecture 3 min</span>
</div>
<h1 class="ml-article-title">Simplification des démarches</h1>
</header>
<div class="ml-article-body">
<p class="ml-lead">Introduction plus grande...</p>
<p>Corps de texte standard de l'article...</p>
</div>
</article>
Le composant .ml-blockquote permet de mettre en valeur une déclaration officielle, un avertissement important ou une directive de sécurité.
« Tout dossier incomplet le jour du rendez-vous sera systématiquement rejeté. Assurez-vous de photocopier toutes les pièces justificatives requises en amont. »
— Service des Visas, Consulat du Mali à Lyon
<blockquote class="ml-blockquote">
<p>« Texte de la citation officielle... »</p>
<cite class="ml-blockquote-footer">— Auteur ou Service Émetteur</cite>
</blockquote>
L'utilisation conjointe des balises .ml-figure et .ml-figcaption offre un cadre harmonieux pour les images d'illustration dans les articles.
<figure class="ml-figure">
<img src="chemin/image.jpg" alt="Description">
<figcaption class="ml-figcaption">Légende descriptive.</figcaption>
</figure>