Section
Plain start
A copied section band. Paste it in, then own every line: it never upgrades under semver.
What the work has produced
Average time to pay
21 days
decreased
17 days faster than before
Chased and collected this quarter
£1.4m
increased
up 12% on last quarter
Invoices paid without a phone call
94%
{% comment %}
STATS / plain start: airy proof figures without card chrome.
WHEN TO USE THIS INSTEAD OF START-ALIGNED ALONE. align="start" (#673) pins
the band to the reading edge but keeps KPI card chrome on every tile.
Personal and consulting presence pages treat figures as evidence in the
flow, not dashboard tiles: pass chrome="plain" WITH align="start" so the
numbers sit bare (no border, elevation or card padding). align alone does
not change chrome; the band forwards chrome explicitly.
The shipped _stat_band.html already is this shape, so the example is the
include.
WHAT YOUR VIEW MUST SUPPLY. Same list-of-dicts contract as
stats/inline-band.html and stats/start-aligned.html:
stats = [
{"value": "21 days", "label": "Average time to pay",
"trend": "down", "trend_label": "17 days faster than before"},
{"value": "£1.4m", "label": "Chased and collected this quarter",
"trend": "up", "trend_label": "up 12% on last quarter"},
{"value": "94%", "label": "Invoices paid without a phone call"},
]
A TREND WITHOUT A trend_label IS A DEFECT. See inline-band.html and
_stat.html's own header.
States: see _stat_band.html/_stat.html's own headers.
Accessibility: see _stat.html's own header for the trend accessibility
contract. Covered by axe.spec.mjs against sections-*.html, both themes.
Responsive: see _stat_band.html's own header.
{% endcomment %}
{% include "brickwork_marketing/components/_stat_band.html" with heading="What the work has produced" stats=stats align="start" chrome="plain" %}
Details
| Kind | Section |
|---|---|
| Used in | None (a document skeleton, used everywhere) |
Composed from
| Template | Description |
|---|---|
brickwork_marketing/components/_stat_band.html |
A row of key figures, styled for a marketing page. |