Frame

A frame puts a soft border and padding around whatever you place inside it, so a screenshot or diagram sits apart from the surrounding text instead of bleeding into it. Add a caption to label what the reader is looking at.

Click a frame to open it full screen, then click anywhere or press Escape to close. Pass zoom={false} to turn that off.

With a caption

Without a caption

Usage

Frame works with any content, an image, a video, or another component:

<script>	import { Frame } from '$lib';</script><Frame caption="The dashboard after a fresh install">	<img src="/screenshots/dashboard.png" alt="Dashboard" /></Frame>

Props