mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ricardo Nunez
40d2e2cd2d
* Add proper language support for syntax highlighting to all code blocks * Camel case inline code
42 lines
869 B
Plaintext
42 lines
869 B
Plaintext
---
|
|
title: "Frames"
|
|
description: "Use the Frame component to wrap images or other components in a container."
|
|
icon: 'frame'
|
|
---
|
|
|
|
Frames are very helpful if you want to center an image.
|
|
|
|
<Frame>
|
|
<img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" />
|
|
</Frame>
|
|
|
|
## Captions
|
|
|
|
You can add additional context to an image using the optional `caption` prop.
|
|
|
|
<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" />
|
|
</Frame>
|
|
|
|
## Props
|
|
|
|
<ResponseField name="caption" type="string">
|
|
Optional caption text to show centered under your component.
|
|
</ResponseField>
|
|
|
|
<RequestExample>
|
|
|
|
```mdx Frame
|
|
<Frame>
|
|
<img src="/path/image.jpg" />
|
|
</Frame>
|
|
```
|
|
|
|
```mdx Frame with Captions
|
|
<Frame caption="Caption Text">
|
|
<img src="/path/image.jpg" />
|
|
</Frame>
|
|
```
|
|
|
|
</RequestExample>
|