Composants

Cartes

Une carte est un conteneur souple qui regroupe un contenu et ses actions : produit, offre, information de compte. Elle accepte en-tête, pied, image, listes et se compose avec la grille et les utilitaires.

Carte de base#

Un card-body contient le titre (card-title), le texte (card-text) et les actions. Sans largeur imposée, la carte occupe toute la largeur disponible ; ici elle est limitée à 18 rem.

Livret d'épargne

À partir de 5 000 FCFA

Mettez de l'argent de côté et retirez-le quand vous voulez.

Ouvrir un livret

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Livret d'épargne</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">À partir de 5 000 FCFA</h6>
    <p class="card-text">Mettez de l'argent de côté et retirez-le quand vous voulez.</p>
    <a href="#" class="btn btn-primary">Ouvrir un livret</a>
  </div>
</div>

Image, liste et liens#

card-img-top place une image en haut de la carte (ici un SVG décrit par aria-label). list-group-flush insère une liste sans bordure extérieure, et card-link aligne plusieurs liens.

Carte de paiement

Payez chez les commerçants et retirez dans les distributeurs.

Plafond de paiement : 1 500 000 FCFA
Cotisation annuelle : 12 000 FCFA
Validité : 3 ans

Conditions Tarifs

<div class="card" style="width: 18rem;">
  <svg class="card-img-top" viewBox="0 0 400 160" role="img" aria-label="Bandeau bleu illustrant la carte de paiement" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="160" fill="#2B62AA"/>
    <rect x="130" y="40" width="140" height="84" rx="10" fill="#ffffff" fill-opacity="0.9"/>
  </svg>
  <div class="card-body">
    <h5 class="card-title">Carte de paiement</h5>
    <p class="card-text">Payez chez les commerçants et retirez dans les distributeurs.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Plafond de paiement : 1 500 000 FCFA</li>
    <li class="list-group-item">Cotisation annuelle : 12 000 FCFA</li>
    <li class="list-group-item">Validité : 3 ans</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Conditions</a>
    <a href="#" class="card-link">Tarifs</a>
  </div>
</div>

En-tête et pied#

card-header et card-footer encadrent le corps. Ils s’accordent avec les utilitaires de texte et de flexbox.

Prêt personnel

Mensualité estimée : 85 000 FCFA

Sur 24 mois, pour un montant emprunté de 1 800 000 FCFA.

Déposer une demande

Simulation indicative

<div class="card text-center">
  <div class="card-header">Prêt personnel</div>
  <div class="card-body">
    <h5 class="card-title">Mensualité estimée : 85 000 FCFA</h5>
    <p class="card-text">Sur 24 mois, pour un montant emprunté de 1 800 000 FCFA.</p>
    <a href="#" class="btn btn-primary">Déposer une demande</a>
  </div>
  <div class="card-footer text-body-secondary">Simulation indicative</div>
</div>

Onglets et pilules dans l'en-tête#

Avec card-header-tabs ou card-header-pills sur un nav placé dans card-header, la carte devient un panneau à onglets. La bascule de contenu relève du composant Navigation et onglets.

Mes comptes

Compte courant : 245 300 FCFA

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" aria-current="true" href="#">Comptes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Épargne</a></li>
      <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Crédits</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Mes comptes</h5>
    <p class="card-text">Compte courant : 245 300 FCFA</p>
  </div>
</div>

Couleurs et bordures#

Utilisez text-bg-* pour colorer toute la carte avec un texte contrasté, ou border-* pour ne colorer que le cadre. text-bg-secondary et text-bg-success ont la même teinte verte dans Cauri.

Épargne

Votre épargne progresse de 2 % ce mois-ci.

Opération validée

Virement de 150 000 FCFA exécuté.

Information

Aucune échéance cette semaine.

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card text-bg-primary h-100">
      <div class="card-header">Épargne</div>
      <div class="card-body"><p class="card-text">Votre épargne progresse de 2 % ce mois-ci.</p></div>
    </div>
  </div>
  <div class="col">
    <div class="card border-success h-100">
      <div class="card-header">Opération validée</div>
      <div class="card-body"><p class="card-text">Virement de 150 000 FCFA exécuté.</p></div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-light h-100">
      <div class="card-header">Information</div>
      <div class="card-body"><p class="card-text">Aucune échéance cette semaine.</p></div>
    </div>
  </div>
</div>

Carte horizontale#

Combinez la grille (row g-0, col-md-*) et la carte pour placer l’image à côté du texte. Sur petit écran, les colonnes s’empilent.

Agence du Plateau

Ouverte du lundi au vendredi, de 8 h à 16 h.

Mise à jour il y a 3 jours

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <svg class="w-100 h-100 rounded-start" viewBox="0 0 200 200" role="img" aria-label="Illustration verte d'une agence" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
        <rect width="200" height="200" fill="#387A1B"/>
        <rect x="55" y="70" width="90" height="70" fill="#ffffff" fill-opacity="0.9"/>
      </svg>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Agence du Plateau</h5>
        <p class="card-text">Ouverte du lundi au vendredi, de 8 h à 16 h.</p>
        <p class="card-text"><small class="text-body-secondary">Mise à jour il y a 3 jours</small></p>
      </div>
    </div>
  </div>
</div>

Image en arrière-plan#

card-img étire l’image sur toute la carte et card-img-overlay y superpose le texte. Vérifiez le contraste entre le texte et l’image.

Prêt immobilier

Réalisez votre projet avec une mensualité adaptée à votre budget.

<div class="card text-bg-dark" style="max-width: 24rem;">
  <svg class="card-img" viewBox="0 0 400 200" role="img" aria-label="Fond bleu foncé" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="200" fill="#0856A1"/>
  </svg>
  <div class="card-img-overlay">
    <h5 class="card-title">Prêt immobilier</h5>
    <p class="card-text">Réalisez votre projet avec une mensualité adaptée à votre budget.</p>
  </div>
</div>

Cartes en grille#

Pour des cartes de hauteur égale, enveloppez-les dans une grille row row-cols-* et ajoutez h-100 à chaque carte. card-group soude au contraire les cartes côte à côte, sans espace.

Compte courant

Gérez vos dépenses au quotidien.

Frais : 2 500 FCFA par mois

Compte épargne

Constituez un capital pour vos projets, avec des versements libres, sans durée minimale et avec un suivi détaillé de votre progression.

Sans frais de tenue

Compte jeune

Pour les 12-25 ans.

Gratuit

Groupe A

Première carte.

Groupe B

Deuxième carte.

<div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Compte courant</h5>
        <p class="card-text">Gérez vos dépenses au quotidien.</p>
      </div>
      <div class="card-footer"><small class="text-body-secondary">Frais : 2 500 FCFA par mois</small></div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Compte épargne</h5>
        <p class="card-text">Constituez un capital pour vos projets, avec des versements libres, sans durée minimale et avec un suivi détaillé de votre progression.</p>
      </div>
      <div class="card-footer"><small class="text-body-secondary">Sans frais de tenue</small></div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Compte jeune</h5>
        <p class="card-text">Pour les 12-25 ans.</p>
      </div>
      <div class="card-footer"><small class="text-body-secondary">Gratuit</small></div>
    </div>
  </div>
</div>
<div class="card-group">
  <div class="card"><div class="card-body"><h5 class="card-title">Groupe A</h5><p class="card-text">Première carte.</p></div></div>
  <div class="card"><div class="card-body"><h5 class="card-title">Groupe B</h5><p class="card-text">Deuxième carte.</p></div></div>
</div>

Classes

Classes
Classe	Rôle
`card`	Conteneur : bordure, arrondi, fond, disposition en colonne.
`card-body`	Corps avec espacement interne ; il remplit l’espace disponible.
`card-title`, `card-subtitle`, `card-text`	Titre, sous-titre et paragraphe de la carte.
`card-link`	Lien dans la carte ; deux liens successifs s’écartent l’un de l’autre.
`card-header`, `card-footer`	Bandeau supérieur et inférieur.
`card-header-tabs`, `card-header-pills`	Adaptent un `nav` au bas de l’en-tête.
`card-img-top`, `card-img-bottom`, `card-img`	Image en haut, en bas, ou sur toute la carte.
`card-img-overlay`	Calque de contenu superposé à l’image.
`card-group`	Soude plusieurs cartes en une rangée de hauteur égale.
`text-bg-`, `border-`	Couleurs contextuelles : fond avec texte, ou cadre seul.

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$card-spacer-y`, `$card-spacer-x`	`1rem`	Espacement interne du corps.
`$card-title-spacer-y`	`.5rem`	Marge sous le titre.
`$card-border-width`	`var(--bs-border-width)`	Épaisseur de la bordure.
`$card-border-color`	`var(--bs-border-color-translucent)`	Couleur de la bordure.
`$card-border-radius`	`var(--bs-border-radius)`	Arrondi des angles.
`$card-box-shadow`	`null`	Ombre de la carte.
`$card-cap-padding-y`, `$card-cap-padding-x`	`.5rem`, `1rem`	Espacement de l’en-tête et du pied.
`$card-cap-bg`	`rgba(var(--bs-body-color-rgb), .03)`	Fond de l’en-tête et du pied.
`$card-bg`	`var(--bs-body-bg)`	Fond de la carte.
`$card-height`	`null`	Hauteur imposée.
`$card-img-overlay-padding`	`1rem`	Espacement du calque superposé.
`$card-group-margin`	`.75rem`	Marge entre les cartes d’un groupe responsive.

Personnalisation#

Chaque carte lit des propriétés CSS locales --bs-card-* : redéfinissez-les sur une classe pour obtenir une variante. Pour un produit bancaire complet, voir aussi Carte produit.

// Global : avant l'import de Cauri
$card-border-radius: 1rem;
$card-spacer-x: 1.25rem;
$card-spacer-y: 1.25rem;
$card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

// Local : une carte mise en avant
.card-offre {
  --bs-card-border-color: #387A1B;
  --bs-card-cap-bg: #EEF3EA;
  --bs-card-border-radius: 1rem;
}

Bonnes pratiques

À faire

Regroupez dans une carte des informations qui forment une seule unité de sens.
Alignez les hauteurs avec h-100 dans une grille et gardez la même structure d’une carte à l’autre.
Donnez un titre à chaque carte, au niveau de titre qui convient à la page.
Placez l’action principale en bas du corps ou dans le pied, de façon cohérente.

À éviter

Ne chargez pas une carte de trop d’informations ni de trop d’actions concurrentes.
Ne superposez pas du texte à une image sans vérifier le contraste.
N’imbriquez pas des cartes dans des cartes : préférez une liste ou des sections.

Accessibilité

Choisissez le niveau de titre (h2 à h6) selon la hiérarchie de la page, pas selon l’aspect ; modifiez l’apparence avec une classe de titre (h5).
Une image porteuse de sens a un texte alternatif ; une image décorative a aria-hidden="true" ou un alt vide.
Si toute la carte est cliquable, ne rendez cliquable qu’un seul élément (voir Lien étendu) avec un libellé explicite.
Les couleurs text-bg-* garantissent un contraste suffisant ; évitez d’associer à la main couleur de texte et de fond.