# Cartes (/fr/components/cards) Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Groupes de code](/fr/components/code-groups.md), [Couleur](/fr/components/color.md) 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 [#carte-simple]
Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page « Colonnes ». ```mdx title="Card example" Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Colonnes. ```
## Variantes de cartes [#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 [#disposition-horizontale]
Ajoutez la propriété `horizontal` pour afficher les cartes dans une disposition horizontale plus compacte. Voici un exemple de carte horizontale. ```mdx title="Horizontal card example" Voici un exemple de carte horizontale. ```
### Cartes avec image [#cartes-avec-image]
Ajoutez la propriété `img` pour afficher une image en haut de la carte. Voici un exemple de carte avec une image. ```mdx title="Image card example" Voici un exemple de carte avec une image. ``` 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. Voici un exemple de carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Colonnes. ```mdx title="Link card example" Ceci est un exemple de carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Colonnes. ```
### Cartes typées [#cartes-typées]
Ajoutez une propriété `type` pour appliquer à une carte le même style qu'un [callout](/fr/components/callouts). 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`. Utilisez `note` pour mettre en avant des informations complémentaires. Utilisez `warning` pour signaler des problèmes potentiels. Utilisez `tip` pour partager des suggestions utiles. Utilisez `danger` pour les actions destructrices ou risquées. ```mdx title="Typed card example" Utilisez `note` pour mettre en avant des informations complémentaires. Utilisez `warning` pour signaler des problèmes potentiels. ```
## Regrouper des cartes [#regrouper-des-cartes]
Utilisez le [composant Columns](/fr/components/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. C’est la première carte. C’est la deuxième carte. ```mdx title="Columns example" This is the first card. Ceci est la deuxième carte. ```
## Propriétés [#propriétés]
Le titre affiché sur la carte. L’icône à afficher. Options: * [Font Awesome](https://fontawesome.com/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `fontawesome` dans votre `docs.json` * [Lucide](https://lucide.dev/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `lucide` dans votre `docs.json` * [Tabler](https://tabler.io/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) 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: 1. Convertissez votre SVG avec le [convertisseur SVGR](https://react-svgr.com/playground/). 2. Collez votre code SVG dans le champ d’entrée SVG. 3. Copiez l’élément complet `...` depuis le champ de sortie JSX. 4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={ ... }`. 5. Ajustez `height` et `width` selon vos besoins. Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. Couleur de l'icône au format code hexadécimal (par exemple, `#FF6B6B`). URL vers laquelle rediriger lorsque la carte est cliquée. Afficher la carte dans une mise en page horizontale compacte. URL ou chemin local vers une image affichée en haut de la carte. Texte personnalisé pour le bouton d’action. Afficher ou masquer l'icône de flèche du lien. 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é.