Skip to content
Mintlify
Mintlify
Components

Frames

Wrap images, videos, and other components with the frame component to add styled borders, captions, and visual emphasis to your content.

Use frames to display images, diagrams, videos, or other visual content with consistent styling and optional captions. Frames center content and provide visual separation from surrounding text.

Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park.

Captions

Add additional context to an image using the optional caption prop. Captions appear in the frame below the image.

Photograph of Yosemite Valley.
Yosemite National Park is visited by over 3.5 million people every year.

Markdown in captions

Captions support Markdown formatting, including links and bold text.

Photograph of Yosemite Valley.
Learn more about [Yosemite National Park](https://www.nps.gov/yose/index.htm) and plan your visit.
Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park.
**Important:** Check the [park website](https://www.nps.gov/yose/index.htm) for current conditions.

Hints

Add text that precedes the frame using the optional hint prop. Hints appear before the frame.

Photograph of a lake surrounded by trees with mountains in the distance in Yellowstone National Park.
Yosemite National Park is visited by over 3.5 million people every year.
If you plan to visit Yosemite National Park, secure your permits before you go.

Videos

When you place a video element with autoPlay inside a frame, the frame adds playsInline, loop, and muted attributes.

Video with autoPlay
<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

Videos without autoPlay do not have any additional attributes added by default.

Properties

captionstring

Text that appears as part of the frame, centered below the content. Supports Markdown formatting including links and bold text.

hintstring

Text that precedes the frame.

<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
Was this page helpful?Suggest editsRaise issue
PreviousFieldsNextIcons

On this page

CaptionsMarkdown in captionsHintsVideosProperties