Writing contentComponents

Frame

View as Markdown

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

Usage

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

Variants

Subtle background

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

Properties

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