> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Cartes

> Mettez en avant les points clés ou les liens avec des mises en page et des icônes personnalisables.

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