Preview frame
A guarded viewport for live UI specimens.
Try it
Scrollable specimen
A long shell preview.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_preview_frame.html" with content=preview_html caption=caption scrollable=scrollable %}context = {'preview_html': '<main><h2>Account settings</h2></main>', 'caption': 'Account settings', 'scrollable': True}Guide
Add it to your project
- Pass safe pre-rendered `content`, or extend the template and fill `preview`.
- Set `scrollable` only for genuinely tall specimens.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| content | safe HTML | Not set | No | Included live markup; the preview block wins when extending. Constraint: Pass only pre-rendered, trusted SafeString markup; do not mark request data safe. |
| caption | string | Not set | No | Figure caption. Constraint: Describe the specimen when a visible figure caption adds context. |
| scale | string | full | No | Presentation scale. Allowed: full, card. Constraint: Use `full` for 1:1 inspection or `card` for a thumbnail-scale specimen. |
| scrollable | boolean | False | No | Caps and makes the viewport scrollable. Constraint: Enable only for a genuinely tall specimen so the normal frame remains compact. |
Named blocks
Fill these only when you extend the component template. They are not values passed to an include or tag.
| Block | What it replaces |
|---|---|
| preview | Trusted live preview markup; this takes precedence over `content` when extending. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- The viewport is a labelled region and becomes keyboard-focusable when scrollable.
- Responsive
- Card scale remains transform-based; scroll cap is constant.
- Without JavaScript
- A normal framed region.
Need help?
Troubleshooting
Contract check: include path. Prefer a pre-rendered SafeString from the view.
Pass trusted pre-rendered content or fill the `preview` block; never mark request data safe for display in the frame.