Cartes

Utilisez le composant carte pour afficher liens, icônes, images et contenu groupé sous forme de conteneurs visuels, en disposition horizontale ou en grille.

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.

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.

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>

Cartes de lien avec CTA personnalisés

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.

Cliquez ici

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>

Ajoutez une propriété type pour appliquer à une carte le même style qu’un callout. Les cartes typées ont un arrière-plan, une bordure et une icône par défaut colorés qui correspondent au type sélectionné. Utilisez-les pour mettre en avant du contenu groupé tel que des notes, des avertissements ou des états de réussite.

Types pris en charge : info, warning, note, tip, check et danger. Vous pouvez éventuellement remplacer l’icône par défaut avec la propriété icon.

Carte de note

Utilisez note pour mettre en avant des informations complémentaires.

Carte d'avertissement

Utilisez warning pour signaler des problèmes potentiels.

Carte de conseil

Utilisez tip pour partager des suggestions utiles.

Carte de danger

Utilisez danger pour les actions destructrices ou risquées.

Typed card example

<Card title="Carte de note" type="note">
  Utilisez `note` pour mettre en avant des informations complémentaires.
</Card>

<Card title="Carte d'avertissement" type="warning">
  Utilisez `warning` pour signaler des problèmes potentiels.
</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

titlestring

Le titre affiché sur la carte.

iconstring

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
Tabler nom d’icône, si vous avez la propriété icons.library paramètres définie sur tabler 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:

Convertissez votre SVG avec le convertisseur SVGR.
Collez votre code SVG dans le champ d’entrée SVG.
Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
Enveloppez le code SVG compatible JSX dans des accolades : icon={<svg ...> ... </svg>}.
Ajustez height et width selon vos besoins.

iconTypestring

Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

colorstring

Couleur de l’icône au format code hexadécimal (par exemple, #FF6B6B).

hrefstring

URL vers laquelle rediriger lorsque la carte est cliquée.

horizontalboolean

Afficher la carte dans une mise en page horizontale compacte.

imgstring

URL ou chemin local vers une image affichée en haut de la carte.

ctastring

Texte personnalisé pour le bouton d’action.

arrowboolean

Afficher ou masquer l’icône de flèche du lien.

typestring

Applique un thème de style callout à la carte. L’une de ces valeurs : info, warning, note, tip, check ou danger. Définit l’arrière-plan, la bordure et l’icône par défaut de la carte pour qu’ils correspondent au type sélectionné.

Carte simple