> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Frame

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

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

## Usage

![Sample photo of mountains](https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg)

**`Markdown`**

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

## Variants

### Subtle background

![Sample photo of mountains](https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg)

**`Markdown`**

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

## Properties

**`caption`** `string`

Caption text to display below the frame

---

**`background`** `'subtle' | 'default'` — default: 'default'

Adds a subtle background to the frame. Use "subtle" for a more muted appearance.

---

**`className`** `string`

Additional CSS classes to apply to the frame

---

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