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

# Cadres

> Mettez en valeur vos visuels avec des cadres stylisés autour des images et d’autres composants.

Utilisez des cadres pour afficher des images, des schémas ou d’autres contenus visuels avec un style cohérent et, au besoin, des légendes. Les cadres centrent le contenu et le distinguent visuellement du texte environnant.

<Frame>
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photographie d’un lac entouré d’arbres, avec des montagnes au loin, dans le parc national de Yellowstone." />
</Frame>

<div id="captions">
  ## Légendes
</div>

Ajoutez un contexte supplémentaire à une image en utilisant la prop optionnelle `caption`. Les légendes s’affichent dans le cadre sous l’image.

<Frame caption="Le parc national de Yosemite est visité par plus de 3,5 millions de personnes chaque année.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photographie de la vallée de Yosemite." />
</Frame>

<div id="hints">
  ## Conseils
</div>

Ajoutez un texte qui précède le cadre à l'aide de la prop optionnelle `hint`. Les conseils apparaissent au-dessus du cadre.

<Frame hint="Si vous prévoyez de visiter le parc national de Yosemite, procurez-vous vos autorisations avant votre départ." caption="Le parc national de Yosemite est visité par plus de 3,5 millions de personnes chaque année.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photographie d'un lac entouré d'arbres avec des montagnes au loin dans le parc national de Yellowstone." />
</Frame>

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

<ResponseField name="caption" type="string">
  Texte affiché dans le cadre, centré sous le contenu.
</ResponseField>

<ResponseField name="hint" type="string">
  Texte affiché avant le cadre.
</ResponseField>

<CodeGroup>
  ```mdx Frame theme={null}
  <Frame>
    <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
  </Frame>
  ```

  ```mdx Frame avec une légende theme={null}
  <Frame caption="Texte de légende">
    <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
  </Frame>
  ```

  ```mdx Frame avec un indice theme={null}
  <Frame hint="Texte d'indice">
    <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
  </Frame>
  ```

  ```mdx Frame avec un indice et une légende theme={null}
  <Frame hint="Texte d'indice" caption="Texte de légende">
    <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
  </Frame>
  ```
</CodeGroup>