Card

Surfaces structurées pour interface produitLien vers la section

Les Carte Component est une surface fondamentale utilisée pour regrouper le contenu, les actions et les métadonnées associés.

Utilisez-le pour:

• tuiles de tableau de bord
• blocs de tarification
• panneaux de réglages
• résumés de facturation
• caractéristiques des cartes
• liste des éléments
• états vides
• sections de compte
• surfaces des produits

La carte est construite sur des tokens sémantiques tels que bg-card, border-borderet text-card-foreground, de sorte qu'il reste cohérent à travers des thèmes clairs et sombres.

ImportationLien vers la section

import { Card } from "@pycolors/ui";

Utilisation de baseLien vers la section

Utilisez Card pour regrouper un titre, une description, un contenu et des actions de pied de page facultatives.

Quand utiliser la carteLien vers la section

Utilisez Card lorsque le contenu a besoin d'une surface claire, d'une limite ou d'un groupement.

VariantesLien vers la section

Les cartes supportent les variantes sémantiques de surface.

Utilisez des variantes pour ajuster le contraste sans changer la mise en page.

Variantes disponiblesLien vers la section

Cartes interactivesLien vers la section

interactive ajoute des affordances visuelles uniquement - curseur, arrière-plan plan et un anneau focus-visible. La carte n'attache jamais son propre clic ou la manipulation du clavier, donc une carte interactive doit composer asChild avec un réel <button> pour une action ou un réel <a>/Link pour la navigation. Ces éléments fournissent le clavier correct, la focus et le clic sémantique nativement - Card n'a pas besoin (et ne doit pas) les recréer.

Avec icôneLien vers la section

Utilisation asChild pour rendre la carte comme un autre élément tout en préservant son style.

Ceci est utile pour les cartes de lien.

CompositionLien vers la section

Une carte suit généralement cette structure:

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>

  <CardContent>Content</CardContent>

  <CardFooter>Actions</CardFooter>
</Card>

Utilisez chaque slot intentionnellement :

UtilisationsLien vers la section

Carte vs section vs listeLien vers la section

APILien vers la section

Composants

Card props

La carte étend le standard HTML div props.

React.HTMLAttributes<HTMLDivElement>;

TypeScript typesLien vers la section

export type CardVariant = "default" | "muted" | "transparent";

export type CardInteractive = boolean;

AccessibilitéLien vers la section

Directives :

• utiliser des en-têtes significatifs à l'intérieur des cartes lorsqu'elles introduisent une section
• interactive ajoute seulement des affordances visuelles (curseur, hover, anneau de focus-visible) - il n'ajoute jamais role, tabIndex, ou manipulation du clavier
• a nues Card interactive avec aucun asChild target n'est pas accessible au clavier ou au lecteur d'écran - il s'agit uniquement de style
• utilisation asChild avec un réel a/Link pour les cartes de navigation
• utilisation asChild avec un réel button pour les cartes d'action
• asChild interactive emballer un élément non focalisable (par exemple un div) n'est pas valide - l'enfant sloté doit être un élément interactif réel
• éviter les contrôles interactifs imbriqués dans une carte cliquable
• garder les états de focus visibles pour les cartes interactives
• ne pas rendre une carte interactive uniquement pour la décoration visuelle

Préférez/évitezLien vers la section

Directives de copie du produitLien vers la section

La copie de la carte devrait rendre le contenu groupé facile à comprendre.

Questions courantesLien vers la section

RelatedLien vers la section