export declare const framesMdxTemplate = "---\ntitle: \"Frames\"\ndescription: \"Give images, videos, and diagrams a bordered container with an optional caption.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n# Frames\n\nGive images, videos, and diagrams a bordered container with an optional caption.\n\nA frame lifts visual content out of the surrounding prose. It centers whatever you put inside, wraps it in a soft border, and gives you a place to attach a caption - so screenshots and diagrams read as deliberate figures rather than stray images.\n\n\n ![\"A](\"https://docs.doccupine.com/demo.png\")
\n\n\n## Frame usage\n\nWrap any visual element in ``. Images, videos, iframes, and Mermaid diagrams all work.\n\n```html\n\n ![\"The](\"/images/dashboard.png\")
\n\n```\n\n## Captions\n\nPass a `caption` to add a short line of context under the content, inside the frame.\n\n```html\n\n \n\n```\n\n\n \n\n\n### Formatting inside captions\n\nCaptions understand a small set of inline Markdown: links, bold, italic, and inline code wrapped in backticks. Everything else is rendered as plain text.\n\n```html\n\n \n\n```\n\n\n \n\n\n\n Links that point to a path starting with `/` are routed through Next.js, so they navigate without a full page reload. External links open in a new tab.\n\n\n## Hints\n\nA `hint` is a line of text that sits above the frame. Use it to set up what the reader is about to look at - captions work better for describing what they just saw.\n\n```html\n\n \n\n```\n\n\n \n\n\nHints accept the same inline Markdown as captions.\n\n## Videos\n\nVideos can be framed like any other element. A video with `autoPlay` is given `muted`, `loop`, and `playsInline` automatically, because browsers refuse to autoplay a video with sound and iOS otherwise opens it fullscreen.\n\n```html\n\n \n\n```\n\nSet any of those attributes yourself and your value is kept. Videos without `autoPlay` are left exactly as you wrote them, so add `controls` when you want the reader to press play.\n\n```html\n\n \n\n```\n\n\n \n\n\n## Multiple elements\n\nA frame can hold more than one child. They stack vertically and stay centered, which is handy for a before-and-after pair under a single caption.\n\n\n \n \n\n\n\n Frames don't replace alt text. Keep writing descriptive `alt` attributes - a caption is visible to everyone, while alt text is what screen readers announce in place of the image.\n\n\n## Properties\n\n\n The content to frame. Usually an image, video, iframe, or diagram.\n\n\n\n Text shown inside the frame, centered below the content. Supports inline Markdown.\n\n\n\n Text shown above the frame. Supports inline Markdown.\n";