mintlify__docs/fr/components/cards.mdx

---
title: "Cartes"
description: "Utilisez le composant carte pour afficher liens, icônes, images et contenu groupé sous forme de conteneurs visuels, en disposition horizontale ou en grille."
keywords: ["cartes", "conteneurs visuels"]
boost: 3
---

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="typed-cards">
  ### Cartes typées
</div>

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

<Columns cols={2}>
  <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>
  <Card title="Carte de conseil" type="tip">
    Utilisez `tip` pour partager des suggestions utiles.
  </Card>
  <Card title="Carte de danger" type="danger">
    Utilisez `danger` pour les actions destructrices ou risquées.
  </Card>
</Columns>

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

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

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