mintlify__docs/fr/components/cards.mdx

---
title: "Cartes"
description: "Utilisez les composants carte pour mettre en avant les points clés, créer des liens de navigation et organiser le contenu avec des icônes et des mises en page personnalisables."
keywords: ["cartes", "conteneurs visuels"]
---

import IconsOptional from "/snippets/fr/icons-optional.mdx";

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.

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

<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>

```mdx 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>
```

<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 matière de contenu.

<div id="horizontal-layout">
  ### Disposition horizontale
</div>

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

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

```mdx Horizontal card example
<Card title="Carte horizontale" icon="text-align-start" horizontal>
  Voici 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
<Card title="Carte avec image" img="/images/card-with-image.png">
  Voici un exemple de carte avec une image.
</Card>
```

<div id="link-cards-with-custom-ctas">
  ### Cartes de lien avec CTA personnalisés
</div>

Vous pouvez personnaliser le texte de l&#39;appel à l&#39;action et contrôler l&#39;affichage d&#39;une flèche. Par défaut, les flèches s&#39;affichent uniquement pour les liens externes.

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

```mdx 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>
```

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

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.

<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
<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>
```


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

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

<IconsOptional />

<ResponseField name="color" type="string">
  Couleur de l&#39;icône au format code hexadécimal (par exemple, `#FF6B6B`).
</ResponseField>

<ResponseField name="href" type="string">
  URL vers laquelle rediriger lorsque la carte est cliquée.
</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 vers une image affichée en haut de la carte.
</ResponseField>

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

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