Easy Solutions - Composants / Card

Basique

La card la plus simple : un seul sous-composant twig:Card:Content. Ombre shadow-lg et coins arrondis activés par défaut.

Contenu de la card.

<twig:Card>
    <twig:Card:Content>
        Contenu de la card.
    </twig:Card:Content>
</twig:Card>

Structure : Header / Content / Footer

Les sous-composants sont optionnels et indépendants. twig:Card:Header regroupe twig:Card:Title et twig:Card:Description. twig:Card:Footer est la zone d'actions en bas de la card.

Titre de la card

Sous-titre optionnel

Corps de la card. Ici va le contenu principal.

Card:Header Regroupe Title et Description. Padding p-ds-24.

Card:Content Corps principal. Padding p-ds-24, pas de top.

Card:Footer Zone d'actions. Flex row, padding px-ds-24 pb-ds-24.

<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Titre</twig:Card:Title>
        <twig:Card:Description>Sous-titre</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        Corps de la card.
    </twig:Card:Content>
    <twig:Card:Footer>
        <twig:Button>Valider</twig:Button>
        <twig:Button variant="secondary">Annuler</twig:Button>
    </twig:Card:Footer>
</twig:Card>

Espacement

L'espacement est défini par les sous-composants via les tokens DS (p-ds-24 = --ds-space-24 = 24 px par défaut). Pour ajuster, passer un token d'espacement via class.

p-16 16 px

p-ds-24 24 px (défaut)

p-32 32 px

p-ds-16 (16 px) Compact. Widgets, listes denses.

p-ds-24 (24 px) Défaut. Contenu courant.

p-ds-32 (32 px) Aéré. Formulaires larges, pages de connexion.

<twig:Card:Content class="p-ds-16">…</twig:Card:Content> <twig:Card:Content>…</twig:Card:Content> <twig:Card:Content class="p-ds-32">…</twig:Card:Content>

Ombres

La card applique shadow-lg par défaut. L'ombre peut être ajustée ou supprimée via class. Utiliser shadow-none sur des fonds colorés ou des zones déjà différenciées.

none

sm

md

lg (défaut)

shadow-none Aucune ombre. Sur fonds colorés ou zones déjà délimitées.

shadow-sm Élévation légère. Listes, tableaux de bord denses.

shadow-md Élévation modérée. Usage courant alternatif.

shadow-lg Défaut. Contenu courant, modales légères.

<twig:Card class="shadow-none">…</twig:Card> <twig:Card class="shadow-sm">…</twig:Card> <twig:Card class="shadow-md">…</twig:Card> <twig:Card>…</twig:Card>

Style flat

Le style flat supprime l'ombre. À utiliser sur des fonds déjà différenciés (fond app, section colorée) où la card doit s'intégrer discrètement.

Card flat sur fond app.

<twig:Card class="shadow-none">…</twig:Card>

API du composant

La card est composée de sous-composants autonomes. Chacun accepte les attributs HTML natifs via {{ attributes }}, dont class pour surcharger l'espacement ou l'ombre.

`<twig:Card>`

Attribut	Type	Description
`class`	string	Classes Tailwind supplémentaires. Ex : `shadow-none`, `shadow-sm`, `w-full`…

Sous-composants

Composant	Rôle	Classes par défaut
`twig:Card:Header`	Zone de titre. Contient `twig:Card:Title` et `twig:Card:Description`.	`flex flex-col gap-ds-8 p-ds-24`
`twig:Card:Title`	Titre principal de la card.	`text-lg font-bold`
`twig:Card:Description`	Sous-titre ou description courte.	`text-sm text-muted`
`twig:Card:Content`	Corps principal. Toujours présent.	`p-ds-24 pt-0`
`twig:Card:Footer`	Zone d'actions (boutons). Disposition flex row.	`flex items-center gap-ds-8 px-ds-24 pb-ds-24`

Do & Don't

Regrouper dans une card des informations qui ont un lien sémantique fort
Utiliser twig:Card:Title et twig:Card:Description dans twig:Card:Header
Placer les actions dans twig:Card:Footer
Utiliser class="shadow-none" sur fond coloré ou zone déjà différenciée
Surcharger l'espacement via class sur le sous-composant concerné si nécessaire

Écrire un <div class="ds-card"> manuellement
Imbriquer des cards sur plus de deux niveaux, la hiérarchie devient illisible
Utiliser class="shadow-lg" sur un fond déjà contrasté
Placer des actions primaires hors de twig:Card:Footer
Ajouter du padding inline au lieu d'utiliser class sur le sous-composant

Règles

Règle

Toujours utiliser <twig:Card>. Ne jamais écrire un <div class="ds-card"> manuellement.

Règle

twig:Card:Content est obligatoire. Une card sans corps principal n'a pas de raison d'exister.

Règle

Ne pas imbriquer des cards sur plus de deux niveaux. Si le besoin existe, revoir la structure de la page.

Règle

Les twig:Button dans twig:Card:Footer doivent respecter la hiérarchie : un seul default par card.