Proof collage
A section that presents live UI as visual proof, in a multi-tile collage or one page stage.
Try it
Component collage
Two live UI tiles with descriptive labels.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_proof_collage.html" %}from django.utils.safestring import mark_safe
context = {'heading': 'Proof in the interface', 'layout': 'collage', 'items': [{'label': 'Primary action', 'content': mark_safe('<button class="bw-button bw-button--primary">Save changes</button>')}, {'label': 'Status', 'content': mark_safe('<span class="bw-badge bw-badge--info">Ready</span>')}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_proof_collage.html" from the installed django-brickwork package.
- Supply list-shaped tile content from a view or wrapper.
- Pass trusted, safe live markup in every content field.
- Choose collage for several examples or page for one composed page fragment.
- Set scrollable true only for tall page specimens.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| heading | string | Not set | No | Section heading; its semantic level is set by this component. Constraint: No additional template constraint beyond the documented type. |
| lede | string | Not set | No | Short supporting copy below the section heading. Constraint: No additional template constraint beyond the documented type. |
| layout | string | collage | No | Proof layout: multi-tile `collage` or a single dominant `page` stage. Allowed: collage, page. Constraint: Allowed values are `collage` and `page`. |
| items | list of {content, label?} | Not set | No | Proof-tile records: `{content, label?}`. Content is trusted, live package markup framed by the component. Constraint: Each record needs safe authored `content`; do not pass user-controlled HTML. An empty list renders no fabricated tile. |
| items[].content | safe HTML | Not set | No | Pre-rendered safe live markup framed as proof. Constraint: No additional template constraint beyond the documented type. |
| items[].label | string | Not set | No | Optional short caption above a proof tile. Constraint: No additional template constraint beyond the documented type. |
| scrollable | boolean | False | No | Forwarded to preview frames. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Section heading is h2, labels are paragraphs, and each preview frame provides its own region label.
- Responsive
- Collage: 1 column below 40rem, 2 from sm, 3 from md. Page is one centred stage.
- Without JavaScript
- Static proof band; scroll semantics come from the composed preview frame.
Need help?
Troubleshooting
Live proof appears as text.
Mark only authored package markup safe before adding it to `items[].content`; do not pass user-provided HTML.