Cartes
Tuiles d'information, liens et blocs de contenu.
1. Carte classique avec Pictogramme
Le format standard intègre un pictogramme SVG officiel du DSML. Au survol de la carte, les couleurs intérieures du pictogramme réagissent en synergie avec la bordure.
<a href="#" class="ml-card ml-card-hover">
<div class="ml-pictogram" aria-hidden="true">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect class="ml-artwork-background" x="4" y="10" width="40" height="28" rx="4" />
<circle class="ml-artwork-major" cx="14" cy="21" r="5" />
<path class="ml-artwork-major" d="M6 32c0-3.5 3-5.5 8-5.5s8 2 8 5.5" />
<line class="ml-artwork-major" x1="26" y1="18" x2="38" y2="18" />
<line class="ml-artwork-major" x1="26" y1="23" x2="36" y2="23" />
<line class="ml-artwork-major" x1="26" y1="28" x2="32" y2="28" />
<circle class="ml-artwork-minor" cx="36" cy="30" r="4" />
</svg>
</div>
<h2 class="ml-card-title">Carte consulaire</h2>
<p class="ml-card-desc">Description de la démarche...</p>
<div class="ml-card-link">Faire la démarche →</div>
</a>2. Carte avec Image (Verticale)
Utilise .ml-card-media pour insérer une illustration ou une photographie en haut de la carte. L'image se dilate très légèrement au survol.
<a href="#" class="ml-card ml-card-hover">
<div class="ml-card-media">
<img src="path/to/image.jpg" alt="Description de l'image">
</div>
<div class="ml-card-content">
<h2 class="ml-card-title">Titre de l'actualité</h2>
<p class="ml-card-desc">Description courte...</p>
<div class="ml-card-link">En savoir plus →</div>
</div>
</a>3. Carte Horizontale (Responsive)
La classe .ml-card-horizontal réorganise la disposition en ligne sur grand écran (média à gauche, contenu à droite) et se replie automatiquement en colonne sur mobile.
<a href="#" class="ml-card ml-card-hover ml-card-horizontal">
<div class="ml-card-media">
<img src="path/to/image.jpg" alt="Description">
</div>
<div class="ml-card-content">
<h2 class="ml-card-title">Coopération Consulaire</h2>
<p class="ml-card-desc">Texte explicatif...</p>
<div class="ml-card-link">Consulter →</div>
</div>
</a>4. Carte Étape / Numérotée
Idéale pour guider l'usager à travers un processus par étapes successives (ex : enrôlement de passeport). Elle intègre .ml-card-number.
Enregistrement en ligne
Remplissez le formulaire de pré-demande et réservez votre créneau de rendez-vous en ligne.
Accéder au portail →<div class="ml-card ml-card-hover">
<span class="ml-card-number">01</span>
<h2 class="ml-card-title">Enregistrement en ligne</h2>
<p class="ml-card-desc">Description de l'étape...</p>
<a href="#" class="ml-card-link">Accéder au portail →</a>
</div>5. Thématisation & Variantes de couleurs
Le DSML propose 5 variantes d'accents colorés pour différencier visuellement certaines thématiques ou niveaux de priorité.
Sahel Or (Mise en valeur)
Idéal pour les alertes modérées, les cartes phares ou de prestige.
En savoir plus →Sahel Terra (Patrimoine)
Idéal pour la culture, le tourisme, l'artisanat et le terroir.
En savoir plus →Premium Dark (Koulouba)
Dégradé sombre et luxueux pour les portails de la Présidence.
En savoir plus →6. Cartes Hero Institutionnelles & Culturelles (.ml-card-hero)
Bannières d'en-tête de haute valeur visuelle avec liseré tricolore républicain supérieur. Le DSML propose une gamme complète de thèmes culturels maliens pour s'adapter à la nature de vos portails et démarches.
Portail Général des Services Publics & Administration
L'accent standard de la République du Mali (normes WCAG 2.1 AAA). Recommandé pour les démarches en ligne, actes administratifs et portails de ministères.
Patrimoine Culturel & Histoire du Mali
Teinte profonde dédiée à la culture, la conservation des manuscrits anciens de Tombouctou et la valorisation du patrimoine textile national.
Artisanat, Agriculture & Développement Rural
Nuances chaudes de terre cuite et d'argile naturelle. Parfait pour les initiatives de l'agriculture, du tourisme local et de l'artisanat d'art.
Transports, Énergie & Infrastructures Hydrauliques
Un bleu-vert aquatique évoquant le majestueux Djoliba. Idéal pour les ministères de l'équipement, du numérique, des eaux et de la transition écologique.
Événements Nationaux & Création Artistique
Dégradé vibrant magenta/violet célébrant l'élégance du bazin et la vitalité créative des festivals culturels de la jeunesse malienne.
Économie, Mines & Investissement
Symbole de richesse minérale et d'opportunités économiques. Destiné aux portails des finances, de l'investissement et du commerce extérieur.
Haute Présidence & Organes Constitutionnels
Habillage sombre et sobre réservé aux communiqués officiels, allocutions présidentielles et instances suprêmes de l'État.
Graphismes Géométriques de la Terre du Mali
Intégration d'un filigrane vectoriel géométrique inspiré des formes sacrées du tissu Bogolan. Apporte une dimension tactile et artisanale d'exception.
Motifs Floraux & Cercle Solaire Wax
Un filigrane en rosace contemporaine inspiré des motifs d'impression Wax. Idéal pour les grands événements artistiques, festivals et portails créatifs.
Énergie, Jeunesse & Initiative Entrepreneuriale
L'orange vif représentant le dynamisme des jeunes entrepreneurs et l'élan de la jeunesse du Mali.
Transition Énergétique & Projets Solaires
Dégradé ambré chaleureux évoquant les rayons solaires de l'Afrique de l'Ouest et les énergies renouvelables.
Bannière Lumineuse & Mise en Lumière
Carte hero à fond jaune lumineux d'or pour attirer immédiatement l'attention sur des annonces majeures ou des bilans nationaux.
<!-- 1. Vert d'État (Défaut) -->
<div class="ml-card-hero">
<div class="ml-card-hero-flag-strip"></div>
<div class="ml-card-hero-content">
<div class="ml-card-hero-badge">Vert d'État</div>
<h3 class="ml-card-hero-title">Titre de la carte</h3>
<p class="ml-card-hero-desc">Description du composant...</p>
</div>
</div>
<!-- 2. Variantes de dégradés thématiques -->
<div class="ml-card-hero ml-card-hero-indigo"> ... </div>
<div class="ml-card-hero ml-card-hero-bogolan"> ... </div>
<div class="ml-card-hero ml-card-hero-river"> ... </div>
<div class="ml-card-hero ml-card-hero-bazin"> ... </div>
<div class="ml-card-hero ml-card-hero-gold"> ... </div>
<div class="ml-card-hero ml-card-hero-koulouba"> ... </div>
<!-- 3. Variantes avec Filigranes & Motifs Géométriques (Bogolan & Wax) -->
<div class="ml-card-hero ml-card-hero-bogolan ml-card-hero-pattern-bogolan">
<div class="ml-card-hero-flag-strip"></div>
<div class="ml-card-hero-content">
<div class="ml-card-hero-badge">Motif Bogolan</div>
<h3 class="ml-card-hero-title">Filigrane Géométrique Bogolan</h3>
</div>
</div>
<div class="ml-card-hero ml-card-hero-bazin ml-card-hero-pattern-wax">
<div class="ml-card-hero-flag-strip"></div>
<div class="ml-card-hero-content">
<div class="ml-card-hero-badge">Motif Wax</div>
<h3 class="ml-card-hero-title">Filigrane Rosace Wax</h3>
</div>
</div>