Passer au contenu principal
Utilisez des cartes pour créer des blocs visuels pour votre contenu. Les cartes sont des conteneurs flexibles qui peuvent inclure du texte, des icônes, des images et des liens.

​
Carte simple

Titre de la carte

Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page « Colonnes ».
Card example
<Card title="Titre de la carte" icon="text-align-start" href="/fr/components/columns">
  Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte,
  vous accédez à la page Colonnes.
</Card>

​
Variantes de cartes

Les cartes proposent plusieurs options de mise en page et de style pour répondre à différents besoins en matière 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.
Horizontal card example
<Card title="Carte horizontale" icon="text-align-start" 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 contrôler l’affichage d’une flèche. Par défaut, les flèches s’affichent uniquement pour les liens externes.

Carte de lien

Voici un exemple de carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Colonnes.
Link card example
<Card
  title="Carte avec lien"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Cliquez ici"
>
  Ceci est un exemple de carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Colonnes.
</Card>

​
Regrouper des cartes

Utilisez le composant Columns pour organiser plusieurs cartes côte à côte. Le composant Columns prend en charge entre une et quatre colonnes et s’ajuste automatiquement aux écrans plus petits.

Première carte

C’est la première carte.

Deuxième carte

C’est la deuxième carte.
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    This is the first card.
  </Card>
  <Card title="Deuxième carte" icon="panel-right-close">
    Ceci est la deuxième carte.
  </Card>
</Columns>

​
Propriétés

​
title
string
requis
Le titre affiché sur la carte
​
icon
string
L’icône à afficher.Options:
  • Font Awesome nom d’icône, si vous avez la propriété icons.library paramètres définie sur fontawesome dans votre docs.json
  • Lucide nom d’icône, si vous avez la propriété icons.library paramètres définie sur lucide dans votre docs.json
  • URL vers une icône hébergée en externe
  • Chemin vers un fichier d’icône dans votre projet
  • Code SVG entouré d’accolades
Pour les icônes SVG personnalisées:
  1. Convertissez votre SVG avec le convertisseur SVGR.
  2. Collez votre code SVG dans le champ d’entrée SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width selon vos besoins.
​
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 code hexadécimal (par exemple, #FF6B6B).
​
href
string
URL vers laquelle rediriger lorsque la carte est cliquée.
​
horizontal
boolean
Afficher la carte dans une mise en page horizontale compacte.
​
img
string
URL ou chemin local vers une image affichée en haut de la carte.
​
cta
string
Texte personnalisé pour le bouton d’action.
​
arrow
boolean
Afficher ou masquer l’icône de flèche du lien.