Card Component
Carte de base
Chaque partie est un emplacement : image,title, les enfants, puisactions. Un emplacement dont la prop est vide n'est pas rendu du tout — pas de figure vide ni de rangée d'actions fantôme.
image prend un nœud et non une source, ce qui laisse composer librement : ici unPicture, dont les emplacements d'angle et de centre posent une pastille sur la photo sans que la carte ait à s'en mêler.
Titre de la carte
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Titre NOUVEAU
Sans figure, avec des badges dans le titre et dans les actions.
Tailles & styles
La taille joue sur le padding du corps et la taille du titre.md est le défaut de daisyUI.
Taille xs
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Taille sm
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Taille md
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Taille lg
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Taille xl
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
style="border"
Bordure pleine.
style="dash"
Bordure tiretée.
Couleur libre
Le fond et le texte restent des utilities Tailwind.
La figure
En haut par défaut, en bas via imagePosition, en fond via imageFull, ou sur le côté viaside.
Image en haut
Image en bas
Image en fond
Le corps passe par-dessus la figure.
side="lg" — verticale en dessous, horizontale au-dessus. Redimensionne la fenêtre pour voir la bascule. daisyUI ne fournit pas de variante 2xl, la prop s'arrête donc à xl.
Nouvel album
Une carte a une figure, un corps, et dans le corps un titre et une rangée d'actions.
Niveau de titre
daisyUI écrit son titre en h2 en dur. Une carte vivant au milieu d'un plan de document, titleAspermet de l'accorder à la hiérarchie environnante — ici la section est déjà unh2, donc les cartes doivent être enh3.
titleAs="h3"
Le style reste identique, seule la sémantique change.
titleAs="h4"
Le style reste identique, seule la sémantique change.
Aucun titre dans le plan — pour une carte purement décorative.
Cartes sélectionnables
daisyUI transforme une carte en contrôle de sélection par:has() — une case cochée allume le contour, et l'input est masqué par appearance: none. La règle vise les enfants directs de la carte, d'où l'emplacement dédiéinput : passé dans les enfants, il atterrirait dans le corps et ne serait jamais vu. La racine passe enlabel pour que tout le bloc soit cliquable.
Ce qu'il faut observer : coche l'une ou l'autre, le contour de la carte s'allume. Attention, daisyUI trace ce contour encurrentColor — une carte dont le texte est clair produit donc un contour clair, invisible sur un fond clair. La carte « Urgent » porte pour cette raison un text-accent à sa racine, la couleur du corps étant rétablie parbodyClassName.