# Cadres (/fr/components/frames)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1403 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

Utilisez des cadres pour afficher des images, des schémas, des vidéos 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 [#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="markdown-in-captions">
  ### Markdown dans les légendes [#markdown-dans-les-légendes]
</div>

Les légendes prennent en charge la mise en forme Markdown, y compris les liens et le texte en gras.

<Frame caption="En savoir plus sur le [parc national de Yosemite](https://www.nps.gov/yose/index.htm) et planifiez votre visite.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photo de la vallée de Yosemite." />
</Frame>

<Frame caption="**Important :** Consultez le [site du parc](https://www.nps.gov/yose/index.htm) pour connaître les conditions actuelles.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photo d'un lac entouré d'arbres avec des montagnes au loin dans le parc national de Yellowstone." />
</Frame>

<div id="hints">
  ## Conseils [#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="videos">
  ## Vidéos [#vidéos]
</div>

Lorsque vous placez un élément `video` avec `autoPlay` dans un cadre, celui-ci ajoute les attributs `playsInline`, `loop` et `muted`.

```mdx title="Video with autoPlay"
<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>
```

Les vidéos sans `autoPlay` ne reçoivent aucun attribut supplémentaire par défaut.

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

<ResponseField name="caption" type="string">
  Texte affiché dans le cadre, centré sous le contenu. Prend en charge la mise en forme Markdown, y compris les liens et le texte en gras.
</ResponseField>

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

<CodeGroup>
  <CodeBlockTabs defaultValue="Frame" groupId="frame+frame-avec-du-markdown-dans-la-l-gende+frame-avec-du-texte-en-gras-et-des-liens-dans-la-l-gende+frame-avec-un-indice+frame-avec-un-indice-et-une-l-gende+frame-avec-une-l-gende">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="Frame">
        Frame
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame avec une légende">
        Frame avec une légende
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame avec du Markdown dans la légende">
        Frame avec du Markdown dans la légende
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame avec du texte en gras et des liens dans la légende">
        Frame avec du texte en gras et des liens dans la légende
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame avec un indice">
        Frame avec un indice
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame avec un indice et une légende">
        Frame avec un indice et une légende
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="Frame">
      ```mdx  
      <Frame>
        <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
      </Frame>
      ```
    </CodeBlockTab>

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

    <CodeBlockTab value="Frame avec du Markdown dans la légende">
      ```mdx  
      <Frame caption="Consultez la [documentation](/docs) pour plus de détails">
        <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame avec du texte en gras et des liens dans la légende">
      ```mdx  
      <Frame caption="**Remarque :** Consultez le [guide officiel](https://example.com) pour les instructions de configuration">
        <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
      </Frame>
      ```
    </CodeBlockTab>

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

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