Embed Block
Embed external content via iframe. Supports CodePen, Figma, Loom, Google Maps, and other embeddable services. Configure aspect ratio and maximum width.
The Embed block allows you to include interactive content from external services directly within your documentation. Any service that provides an embeddable URL can be included.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Embed URL | Yes | The URL to embed (must be an embeddable link) |
| Title | No | Accessibility title for the iframe |
| Aspect Ratio | No | Display ratio: 16:9, 4:3, 1:1, or auto |
| Max Width | No | Maximum width constraint (e.g., 100%, 800px) |
Aspect Ratio Options
Getting Embed URLs
| Service | How to Get Embed URL |
|---|---|
| CodePen | Use the Embed button on any pen, copy the iframe URL |
| Figma | Share > Get embed code, extract the URL from src attribute |
| Loom | Share > Embed, copy the embed URL |
| Google Maps | Share > Embed a map, extract the URL |
Editing Embeds
| Action | How To |
|---|---|
| Enter URL | Paste the embed link in the URL input field |
| Set Title | Enter an optional title for accessibility |
| Choose Ratio | Select aspect ratio from the buttons |
| Set Max Width | Enter a max width value (e.g., 100%, 800px) |
| Preview | View how the embed will render in the viewer |