# Frames (/components/frames)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1241 · updated: 2026-07-30 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md)

Use frames to display images, diagrams, videos, or other visual content with consistent styling and optional captions. Frames center content and provide visual separation from surrounding text.

<Frame>
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Captions [#captions]

Add additional context to an image using the optional `caption` prop. Captions appear in the frame below the image.

<Frame caption="Yosemite National Park is visited by over 3.5 million people every year.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photograph of Yosemite Valley." />
</Frame>

### Markdown in captions [#markdown-in-captions]

Captions support Markdown formatting, including links and bold text.

<Frame caption="Learn more about [Yosemite National Park](https://www.nps.gov/yose/index.htm) and plan your visit.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Photograph of Yosemite Valley." />
</Frame>

<Frame caption="**Important:** Check the [park website](https://www.nps.gov/yose/index.htm) for current conditions.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Hints [#hints]

Add text that precedes the frame using the optional `hint` prop. Hints appear before the frame.

<Frame hint="If you plan to visit Yosemite National Park, secure your permits before you go." caption="Yosemite National Park is visited by over 3.5 million people every year.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park." />
</Frame>

## Videos [#videos]

When you place a `video` element with `autoPlay` inside a frame, the frame adds `playsInline`, `loop`, and `muted` attributes.

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

Videos without `autoPlay` do not have any additional attributes added by default.

## Properties [#properties]

<ResponseField name="caption" type="string">
  Text that appears as part of the frame, centered below the content. Supports Markdown formatting including links and bold text.
</ResponseField>

<ResponseField name="hint" type="string">
  Text that precedes the frame.
</ResponseField>

<CodeGroup>
  <CodeBlockTabs defaultValue="Frame" groupId="frame+frame-with-a-caption+frame-with-a-hint+frame-with-bold-text-and-links-in-caption+frame-with-both-hint-and-caption+frame-with-markdown-in-caption">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="Frame">
        Frame
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame with a caption">
        Frame with a caption
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame with markdown in caption">
        Frame with markdown in caption
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame with bold text and links in caption">
        Frame with bold text and links in caption
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame with a hint">
        Frame with a hint
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame with both hint and caption">
        Frame with both hint and caption
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="Frame">
      ```mdx  
      <Frame>
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame with a caption">
      ```mdx  
      <Frame caption="Caption text">
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame with markdown in caption">
      ```mdx  
      <Frame caption="Visit the [documentation](/docs) for more details">
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame with bold text and links in caption">
      ```mdx  
      <Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame with a hint">
      ```mdx  
      <Frame hint="Hint text">
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Frame with both hint and caption">
      ```mdx  
      <Frame hint="Hint text" caption="Caption text">
        <img src="/path/image.jpg" alt="Descriptive alt text" />
      </Frame>
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>