COMPOSANTS

Affichage de données

Liste clé–valeur (dl/dt/dd)

Pour afficher les propriétés d'un seul objet. La balise dl est sémantiquement correcte pour les paires libellé–valeur.

Fournisseur
Stanley/Stella
Référence
STTU755
Couleur
Noir (Black)
Statut
Validé
<dl class="space-y-2 text-sm">
  <div class="flex justify-between py-1 border-b border-base-200">
    <dt class="text-base-content/60">Fournisseur</dt>
    <dd class="font-medium text-mc-navy">Stanley/Stella</dd>
  </div>
  <div class="flex justify-between py-1 border-b border-base-200">
    <dt class="text-base-content/60">Référence</dt>
    <dd class="font-mono text-xs">STTU755</dd>
  </div>
  <div class="flex justify-between py-1 border-b border-base-200">
    <dt class="text-base-content/60">Couleur</dt>
    <dd class="font-medium text-mc-navy">Noir (Black)</dd>
  </div>
  <div class="flex justify-between py-1">
    <dt class="text-base-content/60">Statut</dt>
    <dd><span class="badge badge-primary badge-sm">Validé</span></dd>
  </div>
</dl>

Label + valeur inline (horizontal)

Pour afficher quelques métadonnées clés en ligne, dans un en-tête de page ou une barre de contexte.

Statut : Actif
Fournisseur : Stanley/Stella
Référence : STTU755-BLK-M 
<div class="flex flex-wrap gap-4">
  <div class="flex items-center gap-2 text-sm">
    <span class="text-base-content/50">Statut :</span>
    <span class="badge badge-primary badge-sm">Actif</span>
  </div>
  <div class="flex items-center gap-2 text-sm">
    <span class="text-base-content/50">Fournisseur :</span>
    <span class="font-medium text-mc-navy">Stanley/Stella</span>
  </div>
  <div class="flex items-center gap-2 text-sm">
    <span class="text-base-content/50">Référence :</span>
    <span class="font-mono text-xs">STTU755-BLK-M</span>
  </div>
</div>

Données brutes (pre / JSON)

Pour afficher une réponse API ou une payload JSON dans les vues de débogage ou les pages techniques. Ne pas utiliser dans les interfaces utilisateur standard.

{
  "id": "prod_12847",
  "sku": "STTU755-BLK-M",
  "supplier": "Stanley/Stella",
  "color": "Black",
  "size": "M",
  "stock": 250,
  "status": "active"
}
<pre class="text-xs bg-base-200 rounded-lg p-3 overflow-auto max-h-64 font-mono">{
  "id": "prod_12847",
  "sku": "STTU755-BLK-M",
  "supplier": "Stanley/Stella",
  "color": "Black",
  "size": "M",
  "stock": 250,
  "status": "active"
}</pre>

Détail dans une card avec en-tête

Le pattern le plus courant pour afficher les détails d'un objet sur une page de fiche. Le bouton "Modifier" dans l'en-tête déclenche la navigation ou un modal.

Détails du produit

Modifier
Nom
Creator T-Shirt
Référence
STTU755
Catégorie
T-shirts
<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)] flex-row items-center justify-between">
    <h2 class="card-title text-base">Détails du produit</h2>
    <a href="#" class="btn btn-ghost btn-xs">Modifier</a>
  </div>
  <div class="card-body">
    <dl class="space-y-2 text-sm">
      <div class="flex justify-between py-1 border-b border-base-200">
        <dt class="text-base-content/60">Nom</dt>
        <dd class="font-medium text-mc-navy">Creator T-Shirt</dd>
      </div>
      <div class="flex justify-between py-1 border-b border-base-200">
        <dt class="text-base-content/60">Référence</dt>
        <dd class="font-mono text-xs">STTU755</dd>
      </div>
      <div class="flex justify-between py-1">
        <dt class="text-base-content/60">Catégorie</dt>
        <dd class="font-medium text-mc-navy">T-shirts</dd>
      </div>
    </dl>
  </div>
</div>
✓ Utiliser dl/dt/dd pour les listes de propriétés d'un objet.
✓ Références et codes : font-mono text-xs systématiquement.
✗ Jamais de table pour afficher les détails d'un seul objet — utiliser dl/dt/dd.