Feature rows
Alternating copy-and-media marketing rows.
Try it
Product rows
Feature copy with a real illustrative SVG.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_feature_rows.html" %}from django.utils.safestring import mark_safe
context = {'heading': 'Made for composition', 'items': [{'heading': 'Shared foundations', 'body': 'Shell, tokens and components work together.', 'media': mark_safe('<svg viewBox="0 0 320 200" role="img" aria-label="Component layout illustration"><rect width="320" height="200" fill="#eef2ff"/><rect x="24" y="24" width="272" height="152" rx="12" fill="#ffffff"/></svg>')}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_feature_rows.html" from the installed django-brickwork package.
- Supply list-shaped item records from context.
- Pass media as already-safe image or SVG markup.
- Keep copy meaningful before media because document order stays copy then media.
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. |
| items | list of {heading, body, media?} | Not set | No | Ordered structured records rendered by the component; supply them from view context rather than trying to construct a list in a template. Constraint: Each record must use the documented keys for this component; an omitted or empty list does not fabricate a placeholder. |
| items[].heading | string | Not set | No | Entry heading rendered for this record. Constraint: No additional template constraint beyond the documented type. |
| items[].body | string | Not set | No | Optional explanatory text for this record. Constraint: No additional template constraint beyond the documented type. |
| items[].media | safe HTML | Not set | No | Pre-rendered safe media HTML for a feature-row item. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- h2 then h3 rows; caller is responsible for decorative media being hidden or informative media being named.
- Responsive
- Stacks below md; zig-zag two-column layout from md.
- Without JavaScript
- Static HTML; no JavaScript required.
Need help?
Troubleshooting
Media renders as escaped text.
Mark only trusted, authored media HTML safe in the view before supplying `items[].media`; never mark visitor input safe.
Explore next