> ## Documentation Index > Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Cartes > Mettez en avant les points clés ou des liens avec des mises en page et des icônes personnalisables Utilisez des cartes pour créer des conteneurs visuels de contenu. Les cartes sont des conteneurs flexibles pouvant inclure du texte, des icônes, des images et des liens.

## Carte simple

Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte, vous êtes redirigé vers la page Columns. ```mdx Card example Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte, vous accédez à la page Columns. ```

## Variantes de cartes

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

### Mise en page horizontale

Ajoutez la propriété `horizontal` pour afficher les cartes dans une mise en page plus compacte et horizontale. Voici un exemple de carte horizontale. ```mdx Horizontal card example Ceci est un exemple de carte horizontale. ```

### Cartes avec image

Ajoutez la propriété `img` pour afficher une image en haut de la carte. Voici un exemple de carte avec image. ```mdx Image card example Ceci est un exemple de carte avec une image. ```

### Cartes de liens 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. Voici un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous redirige vers la page Columns. ```mdx 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. ```

## Regrouper des cartes

Utilisez le [composant Columns](/fr/components/columns) pour afficher plusieurs cartes côte à côte. C’est la première carte. C’est la deuxième carte. ```mdx Columns example Ceci est la première carte. Ceci est la deuxième carte. ```

## Propriétés

Titre affiché sur la carte L’icône à afficher. Options : * Nom d’icône [Font Awesome](https://fontawesome.com/icons) * Nom d’icône [Lucide](https://lucide.dev/icons) * 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 avec le [convertisseur SVGR](https://react-svgr.com/playground/). 2. Collez votre code SVG dans le champ de saisie SVG. 3. Copiez l’élément complet `` depuis le champ de sortie JSX. 4. Mettez le code SVG compatible JSX entre accolades : `icon={}`. 5. Ajustez `height` et `width` au besoin. 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 en code hexadécimal (par exemple « #FF6B6B »). URL vers laquelle accéder lorsqu’on clique sur la carte. Affiche la carte dans une présentation horizontale compacte. URL ou chemin local d’une image affichée en haut de la carte. Texte personnalisé du bouton d’action. Afficher ou masquer l’icône de flèche du lien.