Pricing tier
One self-contained pricing plan card.
Try it
Recommended plan
A highlighted plan with an accessible action.
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_tier.html" %}context = {'name': 'Team', 'description': 'For growing product teams.', 'price': '£29', 'period': '/month', 'features': ['Unlimited projects', 'Priority support'], 'highlighted': True, 'badge': 'Most popular', 'cta_label': 'Choose Team', 'cta_href': '/signup/'}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_pricing_tier.html" from the installed django-brickwork package.
- Include with required name and price.
- Pass features from context.
- Mark only the recommended plan highlighted; its CTA becomes primary and may show badge.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| name | string | Not set | Yes | Plan name rendered as an `<h3>` inside the surrounding pricing section. Constraint: Supply it with `price`; a tier is a child of an h2-bearing pricing section. |
| price | string | Not set | Yes | Display price for this tier. Constraint: No additional template constraint beyond the documented type. |
| period | string | Not set | No | Optional cadence beside the price. Constraint: No additional template constraint beyond the documented type. |
| description | string | Not set | No | Short explanatory text under the displayed name. Constraint: No additional template constraint beyond the documented type. |
| features | list of strings | Not set | No | List of plain-text benefits shown with decorative check icons. Constraint: Every item is plain text; rich markup belongs in a composed custom tier. |
| cta | object {label, url} | Not set | No | Wins over flat fields. Constraint: Use either this object or `cta_label` plus `cta_href`. If both are supplied, this object wins. |
| cta_label | string | Not set | No | Visible label for the template-authorable CTA. Constraint: Supply `cta_href` too; ignored when `cta` is present. |
| cta_href | string | Not set | No | Destination for the flat CTA; pair it with `cta_label`. Constraint: Supply `cta_label` too; ignored when `cta` is present. |
| highlighted | boolean | False | No | Recommended plan styling and primary CTA. Constraint: No additional template constraint beyond the documented type. |
| badge | string | Not set | No | Renders only when highlighted is true. Constraint: Only renders when `highlighted` is truthy. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Plan name is h3; feature icons are decorative.
- Responsive
- No intrinsic breakpoint; parent controls columns.
- Without JavaScript
- Static HTML; no JavaScript required.
Need help?
Troubleshooting
The badge does not appear.
Set `highlighted` truthy as well as `badge`; badges intentionally do not appear on ordinary tiers.
Explore next