Utilisez des cartes pour créer des conteneurs visuels pour votre contenu. Les cartes sont des conteneurs flexibles pouvant inclure du texte, des icônes, des images et des liens.

​
Carte simple

Card title

Voici comment utiliser une carte avec une icône et un lien. Cliquer sur cette carte vous redirige vers la page Columns.
Card example
<Card title="Card title" icon="text" href="/components/columns">
  Voici comment utiliser une carte avec une icône et un lien. Cliquer sur cette carte
  vous redirige vers la page Columns.
</Card>

​
Variantes de cartes

Les cartes proposent plusieurs options de mise en page et de style pour s’adapter à différents types de contenu.

​
Disposition horizontale

Ajoutez la propriété horizontal pour afficher les cartes dans une disposition horizontale plus compacte.

Carte horizontale

Voici un exemple de carte horizontale.
Exemple de carte horizontale
<Card title="Carte horizontale" icon="text" horizontal>
  Voici un exemple de carte horizontale.
</Card>

​
Cartes avec image

Ajoutez la propriété img pour afficher une image en haut de la carte.
yosemite

Carte avec image

Voici un exemple de carte avec une image.
Image card example
<Card title="Carte avec image" img="/images/card-with-image.png">
  Voici un exemple de carte avec une image.
</Card>
Vous pouvez personnaliser le texte de l’appel à l’action et choisir si une flèche s’affiche. Par défaut, les flèches ne s’affichent que pour les liens externes.

Link card

Voici un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous mène à la page Columns.
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  Voici un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous mène à la page Columns.
</Card>

​
Regrouper des cartes

Utilisez le composant Columns pour organiser plusieurs cartes côte à côte.

First card

Voici la première carte.

Second card

Voici la seconde carte.
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    Voici la première carte.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    Voici la seconde carte.
  </Card>
</Columns>

​
Propriétés

​
title
string
required
Le titre affiché sur la carte
​
icon
string
L’icône à afficher.Options :
  • nom de l’icône Font Awesome
  • nom de l’icône Lucide
  • code SVG compatible JSX entre accolades
  • URL d’une icône hébergée en externe
  • chemin vers un fichier d’icône dans votre projet
Pour des icônes SVG personnalisées :
  1. Convertissez votre SVG à l’aide du convertisseur SVGR.
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Placez le code SVG compatible JSX entre accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width si nécessaire.
​
iconType
string
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options : regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Couleur de l’icône au format hexadécimal (p. ex. #FF6B6B).
​
href
string
URL vers laquelle accéder lorsque l’on clique sur la carte.
​
horizontal
boolean
Affiche la carte dans une mise en page horizontale compacte.
​
img
string
URL ou chemin local d’une image affichée en haut de la carte.
​
cta
string
Texte personnalisé du bouton d’action.
​
arrow
boolean
Afficher ou masquer l’icône de flèche du lien.