Scorecard
A responsive dashboard grid for pre-rendered cards.
Try it
KPI grid
Two pre-rendered tiles.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_scorecard.html" with items=cards %}context = {'cards': [{'content': '<article class="bw-stat">Revenue</article>', 'span': 2}, {'content': '<article class="bw-stat">Orders</article>'}]}Guide
Add it to your project
- Render each card in the view or template as safe markup.
- Pass it as each item’s `content`; optionally give it span 2, 3 or 4.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| items | list of mappings | Not set | Yes | Each item has safe `content` and optional `span`. Constraint: Each item must follow the component's documented item-record shape; keep labels and destinations paired. |
| 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. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- It is a layout grouping; cards own their own accessible semantics.
- Responsive
- Columns step 1→2→4 at package breakpoints.
- Without JavaScript
- Grid is server-rendered.
Need help?
Troubleshooting
Contract check: items: a non-empty list of mappings, each: {content: pre-rendered safe
Supply a non-empty list of mappings with trusted pre-rendered `content`; do not pass unescaped user input into that content slot.
Explore next