COMPOSANTS

Cards

Card de base

Structure minimale : une card avec corps uniquement. Adapter le contenu sans toucher aux classes structurelles.

Informations client

Scouts de Namur ASBL — contact@scouts-namur.be — livraison en Belgique.

<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body">
    <h2 class="card-title">Informations client</h2>
    <p class="text-sm text-base-content/70">Scouts de Namur ASBL — contact@scouts-namur.be.</p>
  </div>
</div>

✓ Toujours inclure border border-base-200 sur les cards.

✗ Jamais de card sans bordure — elles disparaissent dans le fond de page.

Card avec en-tête

Pour séparer clairement un titre de section du contenu principal. L'en-tête utilise bg-base-200/60 pour rester discret.

Récapitulatif commande

Référence CMD-0247

Client Marathon de Liège

Montant HT € 3 800

<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body border-b border-base-200 bg-base-200/60 rounded-t-[var(--radius-box)] py-3">
    <h2 class="card-title text-base">Récapitulatif commande</h2>
  </div>
  <div class="card-body">
    <p class="text-sm">Contenu principal.</p>
  </div>
</div>

Card avec pied de page

Le pied de page accueille les actions liées à la card (voir, modifier, valider). Aligner les boutons à droite.

CMD-0241

Client Scouts de Namur

Type Textile · Broderie

Délai 28 mai 2026

<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body border-b border-base-200 bg-base-200/60 rounded-t-[var(--radius-box)] py-3">
    <h2 class="card-title text-base">CMD-0241</h2>
  </div>
  <div class="card-body">
    <p class="text-sm">Contenu principal.</p>
  </div>
  <div class="card-body border-t border-base-200 bg-base-200/60 rounded-b-[var(--radius-box)] py-3 flex justify-end gap-2">
    <button class="btn btn-ghost btn-sm">Voir</button>
    <button class="btn btn-primary btn-sm">Traiter</button>
  </div>
</div>

Card produit (avec image)

Utilisée dans les grilles catalogue et les webshops. Largeur fixe ou contrainte par la grille parente.

Creator T-Shirt

Stanley/Stella · STTU755

Organic Hoodie

Stanley/Stella · STSW339

Polo Workwear

Toptex · TOP-PW14

<div class="card bg-base-100 shadow-sm border border-base-200 overflow-hidden w-48">
  <figure class="aspect-square bg-base-200 flex items-center justify-center">
    <svg class="w-12 h-12 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828
           0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
    </svg>
  </figure>
  <div class="card-body p-3">
    <h3 class="font-accent font-bold text-sm text-mc-navy">Creator T-Shirt</h3>
    <p class="text-xs text-base-content/50">Stanley/Stella · STTU755</p>
  </div>
</div>

Card cliquable

Pour les liens vers des entités (commandes, dossiers, clients). hover:shadow-md signale l'interactivité. Envelopper dans un <a> si la card entière est un lien.

Dossier CMD-0241

Scouts de Namur · Broderie · 28 mai

Dossier CMD-0240

Marathon de Liège · Sérigraphie · 22 mai

Dossier CMD-0238

Club Rugby Namur · Broderie · 15 mai

<div class="card bg-base-100 shadow-sm border border-base-200 cursor-pointer hover:shadow-md transition-shadow">
  <div class="card-body">
    <h2 class="card-title text-sm">Dossier CMD-0241</h2>
    <p class="text-xs text-base-content/50">Cliquer pour ouvrir</p>
  </div>
</div>

✓ Utiliser shadow-sm par défaut, shadow-md au hover pour les cards cliquables.

✗ p-3 uniquement pour les cards très compactes (grilles produits, tableaux) — pas comme règle générale.

Variantes de padding

Le padding par défaut DaisyUI est p-5. Overrider uniquement quand la densité de l'interface l'exige.

Compact — p-3

Grille produits

STTU755 · 18,90 €

Standard — p-5 (défaut)

Section standard

Fiche client, détail commande.

Spacieux — p-6

Dashboard stat

Chiffres clés, KPIs.

<!-- Compact (grilles, listes denses) -->
<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body p-3">...</div>
</div>

<!-- Standard (défaut DaisyUI — p-5) -->
<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body">...</div>
</div>

<!-- Spacieux (dashboard, héros de section) -->
<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="card-body p-6">...</div>
</div>