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

# Encarts

> Ajoutez des composants d'encart info, note, tip, check, warning, danger ou personnalisés pour mettre en avant les informations clés de votre documentation.

Présentez les encarts sous forme de Note, Avertissement, Info, Conseil, Check, Danger, ou créez votre propre encart :

<Note>Ajoute une note dans le contenu</Note>

```mdx theme={null}
<Note>Ajoute une note dans le contenu</Note>
```

<Warning>Cela génère un avertissement à prendre en compte</Warning>

```mdx theme={null}
<Warning>Cela génère un avertissement à prendre en compte</Warning>
```

<Info>Met en avant des informations importantes</Info>

```mdx theme={null}
<Info>Met en avant des informations importantes</Info>
```

<Tip>Voici un conseil utile</Tip>

```mdx theme={null}
<Tip>Voici un conseil utile</Tip>
```

<Check>Cela nous donne un statut validé</Check>

```mdx theme={null}
<Check>Cela nous donne un statut validé</Check>
```

<Danger>Ceci est une alerte de danger</Danger>

```mdx theme={null}
<Danger>Ceci est une alerte de danger</Danger>
```

<Callout icon="key" color="#FFC107" iconType="regular"> C’est un encadré personnalisé</Callout>

```mdx wrap theme={null}
<Callout icon="key" color="#FFC107" iconType="regular">Ceci est un encadré personnalisé</Callout>
```

<div id="custom-callout-properties">
  ## Propriétés d'encart personnalisé
</div>

Le composant générique `Callout` prend en charge les icônes et couleurs personnalisées. Les encarts typés (`Note`, `Warning`, `Info`, `Tip`, `Check`, `Danger`) utilisent des icônes et couleurs prédéfinies et n'acceptent que `children`.

<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 personnalisée sous forme de code hexadécimal (par exemple, `#FFC107`). Définit la bordure, la teinte de fond et la couleur du texte de l'encart.
</ResponseField>