# Frames

> Wrap images, videos, and other components with the frame component to add styled borders, captions, and visual emphasis to your content.

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
![Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park.](../img/site-assets/mintlify-assets.b-cdn.net/yellowstone.jpeg)
:::

## 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."}
![Photograph of Yosemite Valley.](../img/site-assets/mintlify-assets.b-cdn.net/yosemite.jpg)
:::

### 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."}
![Photograph of Yosemite Valley.](../img/site-assets/mintlify-assets.b-cdn.net/yosemite.jpg)
:::

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

## Hints

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

:::frame{caption="Yosemite National Park is visited by over 3.5 million people every year." hint="If you plan to visit Yosemite National Park, secure your permits before you go."}
![Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park.](../img/site-assets/mintlify-assets.b-cdn.net/yellowstone.jpeg)
:::

## Videos

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

```mdx Video with autoPlay theme={null}
<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

- `caption` (string) — Text that appears as part of the frame, centered below the content. Supports Markdown formatting including links and bold text.

- `hint` (string) — Text that precedes the frame.

- `className` (string) — Additional CSS classes to apply to the frame.

:::code-group
```mdx Frame theme={null}
<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

```mdx Frame with a caption theme={null}
<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

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

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

```mdx Frame with a hint theme={null}
<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```

```mdx Frame with both hint and caption theme={null}
<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
```
:::

## Related topics

- [Pages](/docs/organize/pages.md)
- [Components overview](/docs/components/index.md)
- [Mintlify MDX extension](/guides/get-started-cli-mdx-extension)

## Related pages

- [Accordions](./create-content-components-accordions.md)
- [Badge](./create-content-components-badge.md)
- [Banner](./create-content-components-banner.md)
- [Callouts](./create-content-components-callouts.md)
- [Cards](./create-content-components-cards.md)
- [Code groups](./create-content-components-code-groups.md)
- [Color](./create-content-components-color.md)
- [Columns](./create-content-components-columns.md)
- [Examples](./create-content-components-examples.md)
- [Expandables](./create-content-components-expandables.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.