Card

Composant carte compose avec sous-composants Header, Title, Description, Content et Footer.

Apercu

Le composant Card de packages/ui est un composant compose qui fournit un conteneur structure pour le contenu. Il se compose de plusieurs sous-composants qui peuvent etre assembles ensemble.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@saas/ui";

Utilisation de base

<Card>
  <CardHeader>
    <CardTitle>Plan Details</CardTitle>
    <CardDescription>Manage your subscription settings.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your current plan: Pro</p>
  </CardContent>
  <CardFooter>
    <Button>Upgrade</Button>
  </CardFooter>
</Card>

Sous-composants

Composant	Element HTML	Fonction
`Card`	`<div>`	Conteneur exterieur avec bordure, coins arrondis et ombre
`CardHeader`	`<div>`	Section superieure avec espacement vertical
`CardTitle`	`<h3>`	Texte de titre en gras
`CardDescription`	`<p>`	Texte de sous-titre attenue sous le titre
`CardContent`	`<div>`	Zone de contenu principal
`CardFooter`	`<div>`	Section inferieure, generalement pour les actions

Patterns de composition

<Card>
  <CardHeader>
    <CardTitle>Statistics</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold">1,234</p>
    <p className="text-sm text-gray-500">Active users</p>
  </CardContent>
</Card>

Carte avec contenu uniquement

<Card>
  <CardContent className="pt-6">
    <p>Simple content card without header or footer.</p>
  </CardContent>
</Card>

Remarque : Ajoutez pt-6 a CardContent lorsqu'il n'y a pas de CardHeader, car le header fournit normalement le padding superieur.

Carte dans une grille

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id}>
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{item.description}</p>
      </CardContent>
    </Card>
  ))}
</div>

Stylisation

Tous les sous-composants acceptent une prop className pour la personnalisation :

<Card className="border-indigo-200 bg-indigo-50">
  <CardHeader>
    <CardTitle className="text-indigo-900">Highlighted Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-indigo-700">This card stands out.</p>
  </CardContent>
</Card>

Styles par defaut

Composant	Classes principales
`Card`	`rounded-lg border bg-white shadow-sm`
`CardHeader`	`flex flex-col space-y-1.5 p-6`
`CardTitle`	`text-lg font-semibold`
`CardDescription`	`text-sm text-gray-500`
`CardContent`	`p-6 pt-0`
`CardFooter`	`flex items-center p-6 pt-0`

Conseils

Utilisez CardFooter pour les boutons d'action ; alignez-les avec justify-end ou justify-between.
Les cartes fonctionnent bien dans les dispositions en grille CSS pour les tableaux de bord et les sections de fonctionnalites.
Pour les cartes cliquables, enveloppez la Card entiere dans un lien ou ajoutez cursor-pointer hover:shadow-md au className de la Card.

Fini ? Marquez cette page comme terminée.