Templates Cards

10 cartes premium à explorer, prévisualiser et réutiliser rapidement.

Curated Card Systems

Des cartes pensées comme une vraie galerie produit

Explorez des cartes prêtes à l'emploi pour e-commerce, SaaS, dashboards et equipes. Chaque modele est presente comme un système visuel premium, pas seulement un bloc isolé.

Commerce Produits, pricing, conversion
Editorial Blog, temoignages, features
Product UI Stats, team, dashboard
Voir la collection Retour à la galerie
Commerce Premium

Une direction visuelle pensée pour vendre, mettre en avant et convertir.

👟
Drop
Studio Runner
129 €
Best value
Pro
29 €
Editorial + Product UI

Des cartes qui peuvent vivre dans une landing, un dashboard ou une page contenu.

✍️
Insights
Design systems for 2026
ARR
📈
91k €
↑ +14%

Une collection organisée par usages réels

Les premières cartes servent l'acquisition et la conversion, puis la page bascule vers les modèles éditoriaux et les cartes d'interface produit.

10 modèles / 3 univers / sélection premium
🔍
Commerce

Cartes pour vendre, comparer et convertir

Une sélection orientée acquisition avec fiches produit, profils, pricing et contenu éditorial.

E-commerce, marketing, product-led pages
1. Product Card

Carte produit avec image, prix et bouton d'achat.

Débutant
👟
Sneakers
Air Max Pro
89,99 €
HTML 
<div class="product-card">
  <div class="product-card__img">
    <img src="produit.jpg" alt="Air Max Pro" />
  </div>
  <div class="product-card__body">
    <span class="product-card__tag">Sneakers</span>
    <h3 class="product-card__name">Air Max Pro</h3>
    <div class="product-card__row">
      <span class="product-card__price">89,99 €</span>
      <button class="product-card__btn">Acheter</button>
    </div>
  </div>
</div>
CSS 
.product-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 4px 12px rgba(0,0,0,.06); transition:all .3s; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.product-card__img { height:200px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-card__img img { width:100%; height:100%; object-fit:cover; }
.product-card__body { padding:20px; }
.product-card__tag { font-size:.7rem; font-weight:700; color:#6C63FF; text-transform:uppercase; letter-spacing:.06em; }
.product-card__name { font-size:1rem; font-weight:700; color:#1A1A2E; margin:6px 0; }
.product-card__row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.product-card__price { font-size:1.25rem; font-weight:800; color:#6C63FF; }
.product-card__btn { padding:8px 18px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); color:#fff; border:none; border-radius:999px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .2s; }
.product-card__btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(108,99,255,.4); }
2. Profile Card

Carte profil utilisateur avec stats et bouton de suivi.

Débutant
JD
Jean Dupont
Développeur Full-Stack
142Posts
4.2kAbonnés
318Suivis
HTML 
<div class="profile-card">
  <div class="profile-card__avatar">JD</div>
  <h3 class="profile-card__name">Jean Dupont</h3>
  <p class="profile-card__role">Développeur Full-Stack</p>
  <div class="profile-card__stats">
    <div class="profile-card__stat">
      <strong>142</strong><span>Posts</span>
    </div>
    <div class="profile-card__stat">
      <strong>4.2k</strong><span>Abonnés</span>
    </div>
    <div class="profile-card__stat">
      <strong>318</strong><span>Suivis</span>
    </div>
  </div>
  <button class="profile-card__follow">+ Suivre</button>
</div>
CSS 
.profile-card { background:#fff; border-radius:20px; border:1px solid #e5e7eb; padding:32px 24px; text-align:center; transition:all .3s; }
.profile-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(108,99,255,.15); }
.profile-card__avatar { width:80px; height:80px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.75rem; font-weight:700; margin:0 auto 14px; }
.profile-card__name { font-size:1.1rem; font-weight:700; color:#1A1A2E; }
.profile-card__role { font-size:.8rem; color:#6b7280; margin-bottom:20px; }
.profile-card__stats { display:flex; justify-content:center; gap:28px; padding:16px 0; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; margin-bottom:20px; }
.profile-card__stat strong { display:block; font-size:1rem; font-weight:800; color:#1A1A2E; }
.profile-card__stat span { font-size:.7rem; color:#6b7280; }
.profile-card__follow { width:100%; padding:11px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); color:#fff; border:none; border-radius:999px; font-size:.875rem; font-weight:700; cursor:pointer; transition:all .2s; }
.profile-card__follow:hover { opacity:.9; transform:scale(1.02); }
3. Pricing Card

Carte de tarification avec plan, fonctionnalités et CTA.

Intermédiaire
Starter
9 € /mois
  • 5 projets
  • 10 Go stockage
  • Support email
Populaire
Pro
29 € /mois
  • Projets illimités
  • 100 Go stockage
  • Support prioritaire
HTML 
<!-- Card normale -->
<div class="pricing-card">
  <div class="pricing-card__plan">Starter</div>
  <div class="pricing-card__price">9 €<span class="pricing-card__per">/mois</span></div>
  <ul class="pricing-card__features">
    <li>5 projets</li>
    <li>10 Go stockage</li>
    <li>Support email</li>
  </ul>
  <button class="pricing-card__cta">Commencer</button>
</div>

<!-- Card mise en avant -->
<div class="pricing-card featured">
  <div class="pricing-card__badge">Populaire</div>
  <div class="pricing-card__plan">Pro</div>
  <div class="pricing-card__price">29 €<span class="pricing-card__per">/mois</span></div>
  <ul class="pricing-card__features">
    <li>Projets illimités</li>
    <li>100 Go stockage</li>
    <li>Support prioritaire</li>
  </ul>
  <button class="pricing-card__cta">Choisir Pro</button>
</div>
CSS 
.pricing-card { background:#fff; border-radius:20px; border:1px solid #e5e7eb; padding:32px 28px; transition:all .3s; position:relative; }
.pricing-card.featured { background:linear-gradient(145deg,#6C63FF,#5A54E6); border:none; color:#fff; box-shadow:0 16px 40px rgba(108,99,255,.35); }
.pricing-card__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#FF6584; color:#fff; font-size:.7rem; font-weight:700; padding:4px 16px; border-radius:999px; white-space:nowrap; }
.pricing-card__plan { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6b7280; margin-bottom:8px; }
.pricing-card.featured .pricing-card__plan { color:rgba(255,255,255,.7); }
.pricing-card__price { font-size:2.5rem; font-weight:900; color:#1A1A2E; }
.pricing-card.featured .pricing-card__price { color:#fff; }
.pricing-card__per { font-size:.875rem; color:#6b7280; }
.pricing-card.featured .pricing-card__per { color:rgba(255,255,255,.6); }
.pricing-card__features { list-style:none; padding:0; margin:20px 0; display:flex; flex-direction:column; gap:10px; }
.pricing-card__features li { font-size:.875rem; color:#6b7280; display:flex; align-items:center; gap:8px; }
.pricing-card.featured .pricing-card__features li { color:rgba(255,255,255,.85); }
.pricing-card__features li::before { content:'✓'; font-weight:700; color:#10B981; flex-shrink:0; }
.pricing-card.featured .pricing-card__features li::before { color:#0FCCCE; }
.pricing-card__cta { width:100%; padding:12px; border:none; border-radius:999px; font-size:.875rem; font-weight:700; cursor:pointer; transition:all .2s; background:linear-gradient(135deg,#6C63FF,#0FCCCE); color:#fff; }
.pricing-card.featured .pricing-card__cta { background:white; color:#6C63FF; }
.pricing-card__cta:hover { transform:scale(1.03); }
4. Blog Card

Carte article avec image, catégorie, titre et auteur.

Débutant
✍️
Design
Les tendances UI/UX à suivre en 2025
MA
Marie A. · 5 min
HTML 
<article class="blog-card">
  <div class="blog-card__img">
    <img src="cover.jpg" alt="Article" />
  </div>
  <div class="blog-card__body">
    <span class="blog-card__cat">Design</span>
    <h3 class="blog-card__title">Les tendances UI/UX 2025</h3>
    <div class="blog-card__meta">
      <div class="blog-card__avatar">MA</div>
      <span>Marie A.</span>
      <span>·</span>
      <span>5 min de lecture</span>
    </div>
  </div>
</article>
CSS 
.blog-card { background:#fff; border-radius:16px; border:1px solid #e5e7eb; overflow:hidden; transition:all .3s; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.1); }
.blog-card__img { height:200px; overflow:hidden; }
.blog-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-card__img img { transform:scale(1.05); }
.blog-card__body { padding:20px; }
.blog-card__cat { font-size:.72rem; font-weight:700; color:#6C63FF; text-transform:uppercase; letter-spacing:.06em; }
.blog-card__title { font-size:1rem; font-weight:700; color:#1A1A2E; margin:6px 0 12px; line-height:1.4; }
.blog-card__meta { display:flex; align-items:center; gap:8px; font-size:.75rem; color:#9CA3AF; }
.blog-card__avatar { width:24px; height:24px; background:#6C63FF; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.6rem; font-weight:700; }
Editorial

Cartes narratives pour rassurer et valoriser

Des composants parfaits pour landing pages, preuve sociale, argumentaires produit et sections contenu.

Testimonial, feature, stats, services
5. Testimonial Card

Carte témoignage avec étoiles, citation et auteur.

Débutant
★★★★★

Un outil incroyable qui a transformé ma façon de travailler. Je le recommande vivement !

SC
Sophie C.
Designer UI/UX
HTML 
<div class="testimonial-card">
  <div class="testimonial-card__stars">★★★★★</div>
  <p class="testimonial-card__quote">
    Un outil incroyable qui a transformé ma façon de travailler !
  </p>
  <div class="testimonial-card__author">
    <div class="testimonial-card__avatar">SC</div>
    <div>
      <strong>Sophie C.</strong>
      <span>Designer UI/UX</span>
    </div>
  </div>
</div>
CSS 
.testimonial-card { background:#fff; border-radius:20px; border:1px solid #e5e7eb; padding:28px; transition:all .3s; }
.testimonial-card:hover { box-shadow:0 16px 40px rgba(108,99,255,.12); transform:translateY(-4px); }
.testimonial-card__stars { color:#F59E0B; letter-spacing:2px; margin-bottom:14px; }
.testimonial-card__quote { font-size:.9rem; color:#6b7280; line-height:1.7; font-style:italic; margin-bottom:18px; }
.testimonial-card__author { display:flex; align-items:center; gap:12px; }
.testimonial-card__avatar { width:44px; height:44px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; font-weight:700; flex-shrink:0; }
.testimonial-card__author strong { display:block; font-size:.875rem; color:#1A1A2E; }
.testimonial-card__author span { font-size:.75rem; color:#9CA3AF; }
6. Feature Card

Carte fonctionnalité avec icône et barre de progression.

Débutant
⚡
Ultra rapide

Performances optimisées pour une expérience fluide.

🔒
Sécurisé

Chiffrement de bout en bout pour vos données.

HTML 
<div class="feature-card">
  <div class="feature-card__icon">⚡</div>
  <h3 class="feature-card__title">Ultra rapide</h3>
  <p class="feature-card__desc">
    Performances optimisées pour une expérience fluide.
  </p>
</div>
CSS 
.feature-card { background:#fff; border-radius:16px; border:1px solid #e5e7eb; padding:28px; transition:all .3s; position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); transform:scaleX(0); transition:transform .3s; transform-origin:left; }
.feature-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(108,99,255,.15); }
.feature-card:hover::before { transform:scaleX(1); }
.feature-card__icon { width:52px; height:52px; background:rgba(108,99,255,.1); border:1px solid rgba(108,99,255,.15); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; }
.feature-card__title { font-size:1rem; font-weight:700; color:#1A1A2E; margin-bottom:8px; }
.feature-card__desc { font-size:.875rem; color:#6b7280; line-height:1.6; }
7. Stats Card

Carte statistique avec gradient, valeur et tendance.

Intermédiaire
💰
48 290 €
Revenu mensuel
↑ +12.5%
👥
12 840
Utilisateurs actifs
↑ +8.3%
HTML 
<div class="stats-card">
  <div class="stats-card__icon">💰</div>
  <div class="stats-card__value">48 290 €</div>
  <div class="stats-card__label">Revenu mensuel</div>
  <div class="stats-card__trend up">↑ +12.5% ce mois</div>
</div>
CSS 
.stats-card { background:linear-gradient(145deg,#6C63FF,#0FCCCE); border-radius:20px; padding:28px; color:#fff; transition:all .3s; box-shadow:0 8px 24px rgba(108,99,255,.3); }
.stats-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 16px 40px rgba(108,99,255,.45); }
.stats-card__icon { font-size:1.75rem; margin-bottom:14px; }
.stats-card__value { font-size:2rem; font-weight:900; line-height:1.1; margin-bottom:4px; }
.stats-card__label { font-size:.8rem; opacity:.8; }
.stats-card__trend { font-size:.75rem; background:rgba(255,255,255,.2); padding:4px 10px; border-radius:999px; margin-top:14px; display:inline-block; }
.stats-card__trend.up   { background:rgba(16,185,129,.2); }
.stats-card__trend.down { background:rgba(239,68,68,.2); }
8. Service Card

Carte service avec effet hover qui change le fond.

Intermédiaire
🎨
UI/UX Design

Créez des interfaces belles et intuitives.

💻
Développement

Code propre et performant pour vos projets.

HTML 
<div class="service-card">
  <div class="service-card__icon">🎨</div>
  <h3 class="service-card__title">UI/UX Design</h3>
  <p class="service-card__desc">
    Créez des interfaces belles et intuitives.
  </p>
</div>
CSS 
.service-card { background:#fff; border-radius:20px; border:1px solid #e5e7eb; padding:32px 24px; text-align:center; transition:all .3s; }
.service-card:hover { background:linear-gradient(145deg,#6C63FF,#5A54E6); border-color:transparent; box-shadow:0 16px 40px rgba(108,99,255,.35); }
.service-card:hover .service-card__title,
.service-card:hover .service-card__desc { color:#fff; }
.service-card__icon { font-size:2.5rem; margin-bottom:16px; }
.service-card__title { font-size:1rem; font-weight:700; color:#1A1A2E; margin-bottom:8px; transition:color .3s; }
.service-card__desc { font-size:.875rem; color:#6b7280; line-height:1.6; transition:color .3s; }
Product UI

Cartes d'interface pour équipes et dashboards

Pensées pour les produits numériques, admin panels et vues de suivi plus premium.

Team, KPI, analytics, internal tools
9. Team Card

Carte membre d'équipe avec couverture, avatar et compétences.

Intermédiaire
AL
Alice Leblanc
Lead Developer
React Node.js Python
HTML 
<div class="team-card">
  <div class="team-card__cover"></div>
  <div class="team-card__body">
    <div class="team-card__avatar">AL</div>
    <h3 class="team-card__name">Alice Leblanc</h3>
    <p class="team-card__role">Lead Developer</p>
    <div class="team-card__skills">
      <span class="team-card__skill">React</span>
      <span class="team-card__skill">Node.js</span>
      <span class="team-card__skill">Python</span>
    </div>
  </div>
</div>
CSS 
.team-card { background:#fff; border-radius:20px; border:1px solid #e5e7eb; overflow:hidden; transition:all .3s; }
.team-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(108,99,255,.15); }
.team-card__cover { height:80px; background:linear-gradient(135deg,#6C63FF,#FF6584); }
.team-card__body { padding:0 24px 24px; text-align:center; }
.team-card__avatar { width:64px; height:64px; background:linear-gradient(135deg,#0FCCCE,#6C63FF); border-radius:50%; border:4px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.25rem; font-weight:700; margin:-32px auto 14px; }
.team-card__name { font-size:1rem; font-weight:700; color:#1A1A2E; }
.team-card__role { font-size:.8rem; color:#6b7280; margin-bottom:14px; }
.team-card__skills { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.team-card__skill { font-size:.7rem; font-weight:700; padding:3px 10px; background:rgba(108,99,255,.1); color:#6C63FF; border-radius:999px; }
10. Dashboard Card

Carte KPI pour tableau de bord avec barre de progression.

Avancé
Ventes totales
📈
24 530 €
↑ +18.2% vs mois dernier
Taux de conversion
🎯
3.48%
↓ -0.3% vs semaine dernière
HTML 
<div class="dashboard-card">
  <div class="dashboard-card__header">
    <span class="dashboard-card__title">Ventes totales</span>
    <div class="dashboard-card__icon">📈</div>
  </div>
  <div class="dashboard-card__value">24 530 €</div>
  <div class="dashboard-card__change up">↑ +18.2% vs mois dernier</div>
  <div class="dashboard-card__bar">
    <div class="dashboard-card__progress" style="width: 72%;"></div>
  </div>
</div>
CSS 
.dashboard-card { background:#fff; border-radius:16px; border:1px solid #e5e7eb; padding:24px; transition:all .3s; }
.dashboard-card:hover { box-shadow:0 12px 32px rgba(0,0,0,.08); transform:translateY(-3px); }
.dashboard-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dashboard-card__title { font-size:.75rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; }
.dashboard-card__icon { width:36px; height:36px; background:rgba(108,99,255,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.dashboard-card__value { font-size:2rem; font-weight:900; color:#1A1A2E; margin-bottom:4px; }
.dashboard-card__change { font-size:.75rem; font-weight:600; }
.dashboard-card__change.up   { color:#10B981; }
.dashboard-card__change.down { color:#EF4444; }
.dashboard-card__bar { height:6px; background:#e5e7eb; border-radius:999px; margin-top:16px; overflow:hidden; }
.dashboard-card__progress { height:100%; background:linear-gradient(90deg,#6C63FF,#0FCCCE); border-radius:999px; transition:width .8s ease; }
← Templates Footer Templates Forms →