Card

La plus simple

Une carte réduite à son corps.

<Card>
  <CardBody>Une carte réduite à son corps.</CardBody>
</Card>

Les exemples de cette page rétrécissent certaines cartes par style, que tous les thèmes comprennent ; l'apparence proprement dite vient plus bas.

Avec ses trois parties

En-tête

Le corps de la carte. Il prend la place restante quand plusieurs cartes se tiennent côte à côte.

Pied de carte

Avec une image

CardImage se place où vous voulez dans la carte. En haut ou en bas, elle suit les angles ; entre deux blocs, elle reste carrée.

Image en haut

Les angles hauts suivent ceux de la carte.

Image en bas

Les angles bas suivent ceux de la carte.

<Card>
  <CardImage src="./icons/banner.svg" alt="" />
  <CardBody>…</CardBody>
</Card>

alt vaut la chaîne vide par défaut : une image décorative est ainsi passée sous silence par les lecteurs d'écran, plutôt qu'annoncée par son nom de fichier. Une image porteuse de sens mérite un alt écrit.

Une grille de cartes

C'est l'usage le plus courant. Étirer chaque carte à la hauteur de sa colonne les aligne quel que soit leur contenu.

Avec le thème Tailwind, l'utilitaire h-full s'en charge :

Sans état

Les composants sont rendus à la génération. Aucun ne garde d'état ni n'écoute d'événement.

Sans dépendance

Le HTML livré ne charge rien.

Sans surprise

Ce qui ne peut pas être rendu arrête la génération plutôt que de disparaître en silence.

<Columns>
  <Column>
    <Card className="h-full">…</Card>
  </Column>
</Columns>

Élévation

Cette carte porte une ombre.

<Card elevated>…</Card>

Entièrement cliquable

Aller aux colonnes

La carte entière est un lien, pas seulement le titre.

<Card href="./columns/">…</Card>

Une cible relative part de la page, une cible absolue de la racine de la version — les mêmes règles que pour un lien Markdown.

Un chiffre mis en avant

Rien de propre au composant : une carte, un peu de typographie, et le pied qui porte la légende.

octet de runtime JavaScript

sur chaque page

composants

utilisables sans import

feuille de style

par version

Une carte d'avertissement

À vérifier avant de publier

Un site généré peut compiler sans erreur et contenir des liens morts. docpensieve check relit la sortie.

L'apparence par className

Le composant n'offre aucune propriété de typographie : les utilitaires du thème s'en chargent, et l'emportent sur le style par défaut.

Centré, en capitales

Corps petit, en italique.

<Card className="border-indigo-400 bg-indigo-50">
  <CardHeader className="text-center uppercase tracking-wide text-indigo-700">
    Centré, en capitales
  </CardHeader>
  <CardBody className="text-sm italic">Corps petit, en italique.</CardBody>
</Card>

Les règles du composant vivent dans la couche components, sous les utilitaires : un className posé à l'emploi l'emporte toujours, même pour défaire le style par défaut.

Sans bordure, sans fond, sans marge intérieure.

La rangée la plus fréquente est une rangée de cartes ; Columns montre comment les tenir à la même hauteur, ce qu'une grille seule ne fait pas.