Composant BDU

Carte produit

Présente une offre (textes d’exemple). Utiliser h-100 et la grille pour aligner plusieurs cartes ; le bouton reste en bas grâce à mt-auto.

Carte avec icône et liste#

Prêt immobilier

Financez votre maison, terrain ou projet de construction.

Simulation en ligne
Accompagnement en agence

Découvrir

<article class="card cauri-product-card" style="max-width: 22rem">
  <div class="card-body d-flex flex-column">
    <div class="cauri-product-card__icon" aria-hidden="true">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10"/></svg>
    </div>
    <h3 class="h5">Prêt immobilier</h3>
    <p>Financez votre maison, terrain ou projet de construction.</p>
    <ul class="cauri-checklist small mb-4">
      <li>Simulation en ligne</li>
      <li>Accompagnement en agence</li>
    </ul>
    <a href="#" class="btn btn-primary mt-auto">Découvrir</a>
  </div>
</article>

Grille de trois cartes#

Particuliers

Comptes, cartes, épargne.

Découvrir

Professionnels

Financement et trésorerie.

Découvrir

Entreprises

Solutions pour PME et grandes entreprises.

Découvrir

<div class="row g-4">
  <div class="col-md-4"><article class="card cauri-product-card h-100"><div class="card-body d-flex flex-column"><h3 class="h5">Particuliers</h3><p>Comptes, cartes, épargne.</p><a href="#" class="btn btn-primary mt-auto">Découvrir</a></div></article></div>
  <div class="col-md-4"><article class="card cauri-product-card h-100"><div class="card-body d-flex flex-column"><h3 class="h5">Professionnels</h3><p>Financement et trésorerie.</p><a href="#" class="btn btn-primary mt-auto">Découvrir</a></div></article></div>
  <div class="col-md-4"><article class="card cauri-product-card h-100"><div class="card-body d-flex flex-column"><h3 class="h5">Entreprises</h3><p>Solutions pour PME et grandes entreprises.</p><a href="#" class="btn btn-primary mt-auto">Découvrir</a></div></article></div>
</div>

Bonnes pratiques

À faire

Même structure d’une carte à l’autre.
Icône décorative en aria-hidden.

À éviter

Mélanger cartes avec et sans icône sur une même ligne.
Annoncer un chiffre sans mention légale.

Accessibilité

Icône décorative masquée aux lecteurs d’écran.
L’élévation au survol est supprimée avec prefers-reduced-motion.