Stat band
A display-scale metric band that forwards records to core stat tiles.
Try it
Plain proof figures
Start-aligned metrics without card chrome.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_stat_band.html" %}context = {'heading': 'Measured impact', 'align': 'start', 'chrome': 'plain', 'stats': [{'value': '42%', 'label': 'Faster delivery', 'trend': 'up', 'trend_label': 'increased'}, {'value': '18 days', 'label': 'Average launch cycle'}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_stat_band.html" from the installed django-brickwork package.
- Supply stats from context.
- Every trend needs trend_label because the forwarded stat tile requires it.
- Use align="start" and chrome="plain" together for bare proof figures.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| heading | string | Not set | No | Section heading rendered as an `<h2>` by this marketing component. Constraint: Keep it in outline order beneath the page hero h1. |
| stats | list of {value, label, trend?, trend_label?} | Not set | No | Metric records: `{value, label, trend?, trend_label?}` forwarded to the core stat tile. Constraint: Every record needs `value` and `label`; `trend_label` is required whenever `trend` is provided. |
| stats[].value | string | Not set | No | Primary metric value passed to the core stat tile. Constraint: No additional template constraint beyond the documented type. |
| stats[].label | string | Not set | No | Text label for the metric. Constraint: No additional template constraint beyond the documented type. |
| stats[].trend | string | Not set | No | Trend direction/value passed to the stat tile. Constraint: No additional template constraint beyond the documented type. |
| stats[].trend_label | string | Not set | No | Required when trend is supplied. Constraint: Required whenever `stats[].trend` is supplied. |
| align | string | center | No | Aligns the heading and metric grid centrally or at the inline start. Allowed: center, start. Constraint: Use only this component’s documented choices. |
| chrome | string | card | No | Forwarded tile chrome. Allowed: card, plain. Constraint: Allowed values: `card`, `plain`. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Heading is h2; forwarded stat tiles provide trend accessibility.
- Responsive
- Auto-fit grid adapts continuously; start alignment pins tiles to the inline start.
- Without JavaScript
- Static values; no JavaScript required.
Need help?
Troubleshooting
A trend fails accessibility checks.
Every stat that supplies `trend` must also supply a readable `trend_label`; pass both through the stats record.
Explore next