# Frame

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A border, rounded corners and a caption around anything - an image, a video, an embed.

`Frame` puts a border and rounded corners around what's inside it - an image, a video, an embed, any HTML - with an optional caption. Unlike [Image](https://preview.writedocs.io/docs/content/components/image/), it has no `src` of its own: it frames what you put in it.

<img src="https://preview.writedocs.io/images/card-demo.svg" alt="The dashboard's home screen" />

*The dashboard's home screen*

```mdx
<Frame caption="The dashboard's home screen">
  <img src="/images/card-demo.svg" alt="The dashboard's home screen" />
</Frame>
```

## A Markdown image

![The dashboard's home screen](https://preview.writedocs.io/images/card-demo.svg)

```mdx
<Frame>
  ![The dashboard's home screen](/images/card-demo.svg)
</Frame>
```

## Hint

`hint` adds a line above the content, inside the frame - to say what to look at:

<img src="https://preview.writedocs.io/images/card-demo.svg" alt="The API keys page" />

*The API keys page*

```mdx
<Frame hint="Click New key at the top right." caption="The API keys page">
  <img src="/images/card-demo.svg" alt="The API keys page" />
</Frame>
```

## An embed

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="An embedded video" allowFullScreen />

*An embedded video*

```mdx
<Frame caption="An embedded video">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="An embedded video" allowFullScreen />
</Frame>
```

## Props

**`caption`** `string`

Text under the content, inside the frame.

**`hint`** `string`

A line above the content, inside the frame.