> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cartes

> Mettez en avant des points essentiels ou des liens avec des mises en page personnalisables et des icônes

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

<div id="basic-card">
  ## Carte simple
</div>

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

```mdx Card example theme={null}
<Card title="Titre de la carte" icon="text" href="/components/columns">
  Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte,
  vous accédez à la page Columns.
</Card>
```

<div id="card-variations">
  ## Variantes de cartes
</div>

Les cartes proposent plusieurs options de mise en page et de style pour répondre à différents besoins en contenu.

<div id="horizontal-layout">
  ### Mise en page horizontale
</div>

Ajoutez la propriété `horizontal` pour afficher les cartes dans une mise en page horizontale plus compacte.

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

```mdx Horizontal card example theme={null}
<Card title="Carte horizontale" icon="text" horizontal>
  Ceci est un exemple de carte horizontale.
</Card>
```

<div id="image-cards">
  ### Cartes avec image
</div>

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

<Card title="Carte avec image" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
  Voici un exemple de carte avec une image.
</Card>

```mdx Image card example theme={null}
<Card title="Carte avec image" img="/images/card-with-image.png">
  Ceci est un exemple de carte avec une image.
</Card>
```

<div id="link-cards-with-custom-ctas">
  ### Cartes de lien avec appels à l’action personnalisés
</div>

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 ne s’affichent que pour les liens externes.

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

```mdx Link card example theme={null}
<Card
  title="Carte de lien"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Cliquez ici"
>
  Ceci est un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous amène à la page Colonnes.
</Card>
```

<div id="grouping-cards">
  ## Regrouper des cartes
</div>

Utilisez le [composant Columns](/fr/components/columns) pour organiser plusieurs cartes côte à côte.

<Columns cols={2}>
  <Card title="Première carte" icon="panel-left-close">
    C’est la première carte.
  </Card>

  <Card title="Deuxième carte" icon="panel-right-close">
    C’est la deuxième carte.
  </Card>
</Columns>

```mdx Columns example theme={null}
<Columns cols={2}>
  <Card title="Première carte" icon="panel-left-close">
    Ceci est la première carte.
  </Card>
  <Card title="Deuxième carte" icon="panel-right-close">
    Ceci est la deuxième carte.
  </Card>
</Columns>
```

<div id="properties">
  ## Propriétés
</div>

<ResponseField name="title" type="string" required>
  Le titre affiché sur la carte
</ResponseField>

<ResponseField name="icon" type="string">
  L’icône à afficher.

  Options :

  * nom de l’[icône Font Awesome](https://fontawesome.com/icons)
  * nom de l’[icône Lucide](https://lucide.dev/icons)
  * code SVG (compatible JSX) entouré d’accolades
  * URL vers 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](https://react-svgr.com/playground/).
  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. Entourez le code SVG compatible JSX avec des accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` si nécessaire.
</ResponseField>

<ResponseField name="iconType" type="string">
  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`.
</ResponseField>

<ResponseField name="color" type="string">
  Couleur de l’icône sous forme de code hexadécimal (par exemple « #FF6B6B »).
</ResponseField>

<ResponseField name="href" type="string">
  URL vers laquelle accéder lorsque l’on clique sur la carte.
</ResponseField>

<ResponseField name="horizontal" type="boolean">
  Afficher la carte dans une mise en page horizontale compacte.
</ResponseField>

<ResponseField name="img" type="string">
  URL ou chemin local d’une image affichée en haut de la carte.
</ResponseField>

<ResponseField name="cta" type="string">
  Texte personnalisé pour le bouton d’appel à l’action.
</ResponseField>

<ResponseField name="arrow" type="boolean">
  Afficher ou masquer l’icône de flèche du lien.
</ResponseField>