Frame | Fern Documentation

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

Usage

Markdown

1 <Frame caption="Beautiful mountains">
2   <img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
3 </Frame>

Markdown

1 <Frame caption="Beautiful mountains" background="subtle">
2   <img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
3 </Frame>

caption

string

Caption text to display below the frame

background

'subtle' | 'default'Defaults to '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

1	<Frame caption="Beautiful mountains">
2	<img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
3	</Frame>

1	<Frame caption="Beautiful mountains" background="subtle">
2	<img src="./path/to/image.jpg" alt="Sample photo of mountains"/>
3	</Frame>