Tutoriel : Le design de cartes (card design) pour le web

Pourquoi les cartes dominent le web moderne

La carte (card) est le composant UI le plus répandu sur le web. Google, Facebook, Airbnb, Amazon — tous structurent leur contenu en cartes. Pourquoi ? Parce que la carte est le conteneur parfait : elle regroupe texte, image et action dans un bloc autonome, facilement scannable, naturellement responsive, et infiniment réutilisable.

Anatomie d’une carte bien conçue

Une carte professionnelle combine ces éléments dans un ordre hiérarchique :

• Image/Média (optionnel) — En haut, ratio fixe (16:9, 4:3 ou 1:1). Attire l’œil en premier
• Titre — Court, descriptif, en gras. Maximum 2 lignes avec troncature
• Metadata (optionnel) — Date, auteur, catégorie, durée. Texte petit, couleur discrète
• Description — 2-3 lignes maximum. Résume l’essentiel. Troncature avec -webkit-line-clamp
• Tags/Badges (optionnel) — Catégorie, statut, prix
• Action — Bouton, lien, ou la carte entière est cliquable

6 types de cartes avec code complet

1. Product Card (e-commerce)

<article class="product-card">
  <div class="product-card__image">
    <img src="produit.webp" alt="Sac en cuir artisanal" loading="lazy">
    <span class="badge">-20%</span>
  </div>
  <div class="product-card__body">
    <p class="product-card__category">Maroquinerie</p>
    <h3 class="product-card__title">Sac en cuir artisanal de Saint-Louis</h3>
    <div class="product-card__price">
      <span class="price-old">25 000 FCFA</span>
      <span class="price-current">20 000 FCFA</span>
    </div>
    <button class="btn-primary">Ajouter au panier</button>
  </div>
</article>

<style>
.product-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.product-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.product-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.product-card:hover .product-card__image img {
  transform: scale(1.05);
}
.badge {
  position: absolute; top: 12px; left: 12px;
  background: #EF4444; color: white;
  padding: 4px 10px; border-radius: 6px;
  font-size: 0.8rem; font-weight: 600;
}
.product-card__body { padding: 16px; }
.product-card__category {
  font-size: 0.8rem; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.product-card__title {
  font-size: 1rem; font-weight: 600; margin: 4px 0 8px;
}
.price-old {
  text-decoration: line-through; color: #9ca3af;
  margin-right: 8px;
}
.price-current {
  font-weight: 700; color: #EF4444; font-size: 1.1rem;
}
</style>

2. Blog Card

<article class="blog-card">
  <img src="article.webp" alt="Titre de l'article"
       class="blog-card__image" loading="lazy">
  <div class="blog-card__body">
    <span class="blog-card__tag">Design</span>
    <h3 class="blog-card__title">
      <a href="/article">Comment créer un design system complet</a>
    </h3>
    <p class="blog-card__excerpt">
      Découvrez les étapes pour construire un design system
      qui scale avec votre équipe...
    </p>
    <div class="blog-card__meta">
      <img src="avatar.webp" alt="" class="avatar">
      <span>Moussa Diop</span>
      <span>·</span>
      <time datetime="2025-01-15">15 jan 2025</time>
      <span>·</span>
      <span>5 min de lecture</span>
    </div>
  </div>
</article>

<style>
.blog-card__image {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; border-radius: 12px 12px 0 0;
}
.blog-card__body { padding: 20px; }
.blog-card__tag {
  display: inline-block; padding: 4px 12px;
  background: #EFF6FF; color: #1D4ED8;
  border-radius: 9999px; font-size: 0.8rem; font-weight: 500;
}
.blog-card__title a {
  color: inherit; text-decoration: none;
  font-size: 1.25rem; line-height: 1.3;
}
.blog-card__title a:hover { color: #1D4ED8; }
.blog-card__excerpt {
  color: #6b7280; margin: 8px 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: #9ca3af;
}
.avatar { width: 28px; height: 28px; border-radius: 50%; }
</style>

3. Pricing Card

<div class="pricing-card pricing-card--featured">
  <span class="pricing-badge">Populaire</span>
  <h3 class="pricing-name">Professionnel</h3>
  <div class="pricing-price">
    <span class="price-amount">350 000</span>
    <span class="price-currency">FCFA</span>
  </div>
  <p class="pricing-desc">Pour les PME qui veulent un site complet</p>
  <ul class="pricing-features">
    <li>✓ Site responsive 5-10 pages</li>
    <li>✓ Paiements Wave et Orange Money</li>
    <li>✓ SEO de base</li>
    <li>✓ Formation 2h incluse</li>
    <li>✓ Support 3 mois</li>
  </ul>
  <a href="#contact" class="btn-primary">Choisir ce plan</a>
</div>

<style>
.pricing-card {
  padding: 32px; border-radius: 16px;
  border: 1px solid #e5e7eb; text-align: center;
}
.pricing-card--featured {
  border: 2px solid #3B82F6;
  box-shadow: 0 8px 32px rgba(59,130,246,0.15);
  position: relative; transform: scale(1.05);
}
.pricing-badge {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: #3B82F6; color: white;
  padding: 4px 16px; border-radius: 9999px;
  font-size: 0.8rem; font-weight: 600;
}
.price-amount { font-size: 3rem; font-weight: 800; }
.pricing-features {
  list-style: none; padding: 0; text-align: left;
  margin: 24px 0;
}
.pricing-features li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
</style>

4. Testimonial Card

<blockquote class="testimonial-card">
  <div class="testimonial-stars">★★★★★</div>
  <p class="testimonial-text">
    "Notre CA en ligne a triplé en 3 mois grâce au site
    créé par ITSkillsCenter. Le support est exceptionnel."
  </p>
  <footer class="testimonial-author">
    <img src="awa.webp" alt="" class="testimonial-avatar">
    <div>
      <cite class="testimonial-name">Awa Ndiaye</cite>
      <p class="testimonial-rôle">Fondatrice, DakarStyle</p>
    </div>
  </footer>
</blockquote>

Grilles de cartes responsives

/* Grille auto-responsive — pas de media queries nécessaires */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Avec container queries pour des cartes adaptatives */
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .blog-card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
  .blog-card__image {
    border-radius: 12px 0 0 12px;
    height: 100%;
  }
}

/* Masonry layout (CSS natif, support en cours) */
.masonry-grid {
  columns: 3;
  column-gap: 24px;
}
.masonry-grid .card {
  break-inside: avoid;
  margin-bottom: 24px;
}

Carte cliquable accessible

<!-- Pattern : lien qui couvre toute la carte -->
<article class="card">
  <img src="..." alt="...">
  <h3><a href="/article" class="card-link">Titre</a></h3>
  <p>Description...</p>
</article>

<style>
.card { position: relative; }

/* Le lien couvre toute la carte via pseudo-élément */
.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Focus visible sur la carte entière */
.card:has(.card-link:focus-visible) {
  outline: 3px solid #3B82F6;
  outline-offset: 2px;
}

/* Autres liens à l'intérieur restent cliquables */
.card a:not(.card-link) {
  position: relative;
  z-index: 1;
}
</style>

Erreurs courantes

1. Cartes de hauteurs différentes — Utilisez CSS Grid avec subgrid ou des hauteurs fixes pour les images et la troncature pour le texte
2. Trop d’information — Une carte doit donner envie de cliquer, pas tout dire. Limitez à titre + 2 lignes + 1 action
3. Hover sans focus — Si vous avez un effet au hover, il faut le même effet au focus clavier pour l’accessibilité
4. Images sans ratio fixe — Les images de tailles différentes créent une grille chaotique. Fixez le ratio avec aspect-ratio
5. Pas de feedback tactile — Sur mobile, ajoutez un état :activé avec un léger changement de couleur ou d’ombre

Les cartes sont le composant le plus polyvalent du web. Maîtrisez les 4 types de base (product, blog, pricing, testimonial), combinez-les avec CSS Grid pour des layouts responsives, et respectez l’accessibilité avec le pattern de lien englobant. Vous aurez les briques pour construire n’importe quelle interface moderne.