# Frame

Wraps existing markup — a raw `<img>`, a markdown `![]()` image, a `<video>`, an `<iframe>` embed, anything — in a bordered, rounded card, with an optional caption inside that same card. Unlike [Image](/docs/content/components/image/), `Frame` has no `src`/`size`/dark-mode props of its own; it just frames whatever you already have:

<Frame caption="A framed image, with a caption">
  <img src="/images/card-demo.svg" alt="Example image" />
</Frame>

```mdx
<Frame caption="A framed image, with a caption">
  <img src="/images/card-demo.svg" alt="Example image" />
</Frame>
```

Markdown image syntax works the same way, without needing a raw `<img>` tag:

```mdx
<Frame>
  ![Example image](/images/card-demo.svg)
</Frame>
```

**`Frame` props**

<Parameter name="caption" type="string">
  Omit it and the frame renders with no text underneath, just the bordered card around whatever's inside it.
</Parameter>

<Parameter name="hint" type="string">
  A short line shown inside the frame, above its content.
</Parameter>