Stat
A KPI tile with value, optional comparison and optional sparkline.
Try it
Revenue metric
A positive revenue comparison.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_stat.html" with label="Revenue" value="£42,100" trend="up" trend_label="12% on last month" sentiment="good" %}context = {}Guide
Add it to your project
- Include with label and formatted value.
- Use `trend` with `trend_label` to communicate comparison; compose `trend_indicator` for standalone use.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| label | string | Not set | Yes | Metric name. Constraint: Use concise visible text that identifies the control or measurement. |
| value | string | Not set | Yes | Already formatted metric value. Constraint: Use the same type and scale expected by the receiving form or measurement. |
| trend | string | Not set | No | Direction. Allowed: up, down, flat. Constraint: Allowed values: `up`, `down`, `flat`. |
| trend_label | string | Not set | No | Visible comparison wording. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| sentiment | string | Not set | No | Optional judgement colour. Allowed: good, bad. Constraint: Allowed values: `good`, `bad`. |
| icon | registered icon name | Not set | No | Leading flat glyph. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| href | string | Not set | No | Makes tile a real anchor. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields. |
| loading | boolean | False | No | Skeleton state. Constraint: Use only for a temporary loading state and replace it with real or error content. |
| size | string | md | No | Tile scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| chrome | string | card | No | Surface treatment. Allowed: card, plain. Constraint: Allowed values: `card`, `plain`. |
| data | mapping | Not set | No | Consumer-owned data-* attributes. Constraint: Use the component's documented structured data shape; it is not a scalar visitor control. |
| sparkline | safe HTML | Not set | No | Trusted pre-rendered visualisation markup; ignored while loading. Constraint: Pass trusted pre-rendered sparkline markup from the paired component; never inject request text as HTML. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Trend text and hidden direction prevent colour-only meaning.
- Responsive
- Tile responds as part of its parent grid.
- Without JavaScript
- Server-rendered metric.
Need help?
Troubleshooting
Contract check: brickwork does not validate URL schemes; href values are emitted as
Validate user-supplied `href` values before rendering a linked stat; Brickwork emits the URL as given.
Explore next