***

title: Frame
description: >-
Use Fern's Frame component to display images with captions in your docs.
Includes subtle background variants and properties.
---------------------------------------------------

For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see [https://buildwithfern.com/learn/llms.txt](https://buildwithfern.com/learn/llms.txt). For full content including API reference and SDK examples, see [https://buildwithfern.com/learn/llms-full.txt](https://buildwithfern.com/learn/llms-full.txt).

The `<Frame>` component provides a container for images and other media with optional captions and backgrounds.

## Usage

<div>
  <Frame caption="Beautiful mountains">
    <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains" />
  </Frame>
</div>

```jsx Markdown
<Frame caption="Beautiful mountains">
  <img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
</Frame>
```

## Variants

### Subtle background

<div>
  <div>
    <Frame caption="Beautiful mountains" background="subtle">
      <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains" />
    </Frame>
  </div>
</div>

```jsx Markdown
<Frame caption="Beautiful mountains" background="subtle">
  <img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
</Frame>
```

## Properties

<ParamField path="caption" type="string" required={false}>
  Caption text to display below the frame
</ParamField>

<ParamField path="background" type="'subtle' | 'default'" required={false} default="'default'">
  Adds a subtle background to the frame. Use "subtle" for a more muted appearance.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the frame
</ParamField>