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

# Cartes

> Utilisez le composant carte pour afficher liens, icônes, images et contenu groupé sous forme de conteneurs visuels, en disposition horizontale ou en grille.

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 theme={null}
<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 theme={null}
<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 theme={null}
<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'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.

<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 theme={null}
<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é, ce qui vous permet de les utiliser 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 theme={null}
<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 theme={null}
<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>

<ResponseField name="icon" type="string">
  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 `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` selon vos besoins.
</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 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>