Pricing table
A responsive wrapper that arranges pricing tiers.
Try it
Three tiers
A tier array with a highlighted plan.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_pricing_table.html" %}context = {'heading': 'Simple pricing', 'lede': 'Start small and scale when needed.', 'tiers': [{'name': 'Starter', 'price': '£0', 'period': '/month', 'features': ['One project'], 'cta_label': 'Choose Starter', 'cta_url': '/signup/'}, {'name': 'Team', 'price': '£29', 'period': '/month', 'features': ['Unlimited projects'], 'highlighted': True, 'badge': 'Most popular', 'cta_label': 'Choose Team', 'cta_url': '/signup/'}], 'note': 'Prices exclude applicable taxes.'}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_pricing_table.html" from the installed django-brickwork package.
- Supply tier records from the view or wrapper context.
- Each record uses the pricing_tier public contract.
- Use note for pricing caveats under the table.
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. |
| lede | string | Not set | No | Short supporting copy below the section heading. Constraint: No additional template constraint beyond the documented type. |
| tiers | list of pricing tier context | Not set | No | Tier dictionaries are mapped into `_pricing_tier.html`: `name`, `price`, optional `period`, `description`, `features`, `cta` or flat `cta_label` plus `cta_url`, `highlighted`, and `badge`. Constraint: Each record needs `name` and `price`. `cta` is `{label, url}` and wins over the flat pair. The table maps its `cta_url` key to the child tier’s `cta_href`; use `cta_url` here, not `cta_href`. A badge renders only when `highlighted` is truthy. |
| note | string | Not set | No | Fine print under the pricing or comparison table. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Wrapper gives the section h2; cards supply h3 names.
- Responsive
- 1 column below md, 2 below lg, 3 from lg; one tier centres at every width.
- Without JavaScript
- Static layout; CTA links work without JavaScript.
Need help?
Troubleshooting
Only one tier looks unusually narrow.
This is the intentional single-tier state. Supply two to four tier dictionaries when the page should use the responsive comparison grid.
Explore next