Comparison table
A semantic feature-comparison table with responsive stacked rows.
Try it
Plan comparison
A highlighted Pro plan.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_comparison_table.html" with heading=heading caption=caption plans=plans rows=rows highlighted="Pro" %}context = {'plans': ['Starter', 'Pro'], 'rows': [{'label': 'Projects', 'cells': ['3', 'Unlimited']}, {'label': 'Support', 'cells': [{'included': False}, {'included': True}]}], 'heading': 'Plans', 'caption': 'Plan comparison'}Guide
Add it to your project
- Prepare heading labels and comparison rows.
- Include the partial with the table context.
- Keep values as text or safe, consumer-owned markup only when appropriate.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| heading | str | Not set | No | Section heading. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| lede | str | Not set | No | Introductory copy. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| note | str | Not set | No | Supporting note. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| caption | str | Not set | No | Semantic table caption. Constraint: Describe the specimen when a visible figure caption adds context. |
| heading_id | str | bw-comparison-table-heading | No | Stable heading id; change for multiple comparisons. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| plans | list[str] | Not set | No | Plan headers after the capability column. Constraint: Each plan record needs a stable identifier and label; every comparison row must align to that order. |
| rows | list[dict] | Not set | No | Rows with `label` and `cells`; a cell is text or `{included: bool}`. Constraint: Use records in the documented column order; preserve a cell for every declared column. |
| highlighted | int|str | Not set | No | Zero-based plan index, digit string, or exact plan name. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| highlighted_label | str | Recommended | No | Visually hidden recommendation text for the highlighted header. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Uses table semantics and preserves labels with each stacked value.
- Responsive
- `scroll` preserves the table; `stack` exposes each cell with its row label.
- Without JavaScript
- Static table HTML only.
Need help?
Troubleshooting
Contract check: An empty plans or rows list renders the intro alone (or nothing if that
Do not expect a fabricated comparison table for empty data; provide plans and rows together when a comparison is available.