Les cartes
jdb-card-x
Cartes
Les cartes sont des conteneurs qui se démarquent du reste du contenu grâce à des ombres portées. JdB.CSS propose plusieurs niveaux d'ombre pour créer différents effets de profondeur.
Pour en savoir plus sur les niveaux d'ombre dans JdB.CSS, veuillez consulter le chapitre sur les ombres.
Cartes avec images
Combinez les cartes avec des images pour créer des présentations visuelles attrayantes.
La nature en couleur
Découvrez la beauté des forêts et des paysages naturels préservés.
La nature en couleur
Découvrez la beauté des forêts et des paysages naturels préservés.
<div class="jdb-card-4">
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Nature" class="jdb-image">
<div class="jdb-container">
<h4>La nature sauvage</h4>
<p>Découvrez la beauté des forêts et des paysages naturels préservés.</p>
</div>
</div>Cartes de profil
Créez des cartes de profil avec photo, nom et informations.
José dBruxelles
Développeur Web
Passionnée par le code et le design.
Jean Martin
Designer UI/UX
Créateur d'expériences utilisateur.
<div class="jdb-card-2 jdb-center">
<img src="/me.jpg" alt="Avatar"
class="jdb-image jdb-circle jdb-margin-top"
style="max-width:150px; aspect-ratio:1/1;">
<div class="jdb-container">
<h4><b>José dBruxelles</b></h4>
<p class="jdb-text-gray">Développeur Web</p>
<p>Passionnée par le code et le design.</p>
<button class="jdb-button jdb-blue jdb-margin-bottom">Contacter</button>
</div>
</div>Cartes avec en-tête coloré
Ajoutez une en-tête coloré pour distinguer vos cartes et les rendre plus attrayantes.
Plan Basique
9,99€ / mois
✓ 10 GB de stockage
✓ Support email
✓ Accès mobile
✗ Fonctionnalités premium
Plan Pro
19,99€ / mois
✓ 100 GB de stockage
✓ Support prioritaire
✓ Accès mobile et desktop
✓ Fonctionnalités premium
Plan Entreprise
49,99€ / mois
✓ Stockage illimité
✓ Support dédié 24/7
✓ Tous les accès
✓ Fonctionnalités avancées
<div class="jdb-card-4">
<div class="jdb-container jdb-blue">
<h4>Plan Basique</h4>
</div>
<div class="jdb-container">
<p class="jdb-xlarge"><b>9,99€</b> / mois</p>
<p>✓ 10 GB de stockage</p>
<p>✓ Support email</p>
<button class="jdb-button jdb-blue jdb-block jdb-margin-bottom">Choisir</button>
</div>
</div>Pour en savoir plus sur les couleurs, veuillez consulter le chapitre sur les couleurs.
Cartes avec badges
Ajoutez des badges pour mettre en évidence des informations importantes sur vos cartes.
Produit Premium
Un article de qualité supérieure pour votre confort.
59,99€
Offre Spéciale
Profitez de notre promotion exceptionnelle.
39,99€ 59,99€
Bestseller
Le produit le plus vendu cette saison. Ne laissez pas passer l'occasion.
49,99€
Édition Limitée
Disponible jusqu'à épuisement des stocks.
79,99€
<div class="jdb-card-4">
<div class="jdb-display-container">
<span class="jdb-tag jdb-red jdb-display-topright jdb-margin">Nouveau</span>
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Produit" class="jdb-image">
</div>
<div class="jdb-container">
<h5>Produit Premium</h5>
<p class="jdb-clamp l2">Un article de qualité supérieure pour votre confort.</p>
<p><b>59,99€</b></p>
</div>
</div>Pour en savoir plus sur les badges, veuillez consulter le chapitre sur les badges.
Cartes hoverable
Ajoutez un effet au survol pour rendre vos cartes interactives et cliquables.
<div class="jdb-card-2 jdb-hover-shadow">
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Article"
class="jdb-image jdb-hover-opacity">
<div class="jdb-container">
<h4>Article de blog</h4>
<p class="jdb-text-gray">15 février 2026</p>
<p class="jdb-clamp l2">Découvrez nos derniers conseils et astuces.</p>
<a href="#" class="jdb-button jdb-blue jdb-margin-bottom">Lire plus</a>
</div>
</div>Cartes avec bordures colorées
Combinez les cartes avec des bordures latérales pour un style distinctif.
<div class="jdb-card-4 jdb-leftbar jdb-border-blue jdb-container"> <h5>Information</h5> <p>Cette carte avec une bordure bleue attire l'attention.</p> </div> <div class="jdb-card-4 jdb-leftbar jdb-border-green jdb-container"> <h5>Succès</h5> <p>Votre action a été effectuée avec succès.</p> </div>
Pour en savoir plus sur les panneaux, veuillez consulter le chapitre sur les panneaux.
Cartes arrondies
Combinez les cartes avec les classes d'arrondissement pour un style plus doux.
Coins arrondis subtils
Carte avec classe jdb-round pour un style moderne.
Coins plus arrondis
Carte avec classe jdb-round-lg pour plus de douceur.
Coins très arrondis
Carte avec classe jdb-round-xl pour un effet prononcé.
Coins extrêmement arrondis
Carte avec classe jdb-round-xxl pour un style très doux et moderne.
<div class="jdb-card-4 jdb-round">
<img src="/arbre-au-centre-de-la-foret.jpg" alt="Image"
class="jdb-image" style="border-radius: 4px 4px 0 0;">
<div class="jdb-container">
<h4><b>Coins arrondis subtils</b></h4>
<p>Carte avec classe jdb-round pour un style moderne.</p>
</div>
</div>Pour en savoir plus sur les arrondissements dans JdB.CSS, veuillez consulter le chapitre sur les arrondissements.
Cartes statistiques
Mettez en avant des chiffres clés avec des cartes statistiques colorées.
2,458
Utilisateurs actifs
1,234
Ventes ce mois
45,678
Vues de page
8,523
Favoris
<div class="jdb-card-4 jdb-round-lg jdb-blue jdb-container jdb-center"> <i class="jdb-margin-top fa fa-users fa-3x"></i> <h3 class="jdb-margin-top">2,458</h3> <p>Utilisateurs actifs</p> </div>
Conseil : Les cartes sont très flexibles. N'hésitez pas à combiner différentes classes (couleurs, bordures, arrondissements, etc.) pour créer le style qui correspond le mieux à votre design.