Section
Three tier
A copied section band. Paste it in, then own every line: it never upgrades under semver.
Pay for the people, not the paperwork
Every plan includes unlimited invoices and automatic reminders.
Solo
For one person invoicing a handful of clients.
£9 /month
- Unlimited invoices
- Automatic reminders
Most popular
Team
For a finance function of two to ten.
£29 /month
- Everything in Solo
- Up to 10 users
Scale
Multi-entity, multi-currency, audit trails.
£89 /month
- Everything in Team
- Multi-currency
Prices exclude VAT. Annual billing saves two months.
{% comment %}
PRICING / three tiers: the standard good-better-best table.
WHEN TO USE THIS INSTEAD OF THE SINGLE PLAN. When the plans differ by SIZE
(how many people, how many entities, how much volume) rather than by kind.
Three columns invite a comparison, so only use three when a comparison is
actually the decision the reader has to make. One product with one price is
better served by sections/pricing/single-plan.html, and a long list of
differing capabilities by sections/pricing/comparison-table.html.
WHAT YOUR VIEW MUST SUPPLY. `tiers` is a list of dicts, and a Django template
cannot build a list inline, so it comes from context. This is the shape to
pass when your prices are driven by your billing system:
tiers = [
{"name": "Solo", "price": "£9", "period": "/month",
"description": "For one person invoicing a handful of clients.",
"features": ["Unlimited invoices", "Automatic reminders",
"Open Banking reconciliation"],
"cta_label": "Start free trial",
"cta_url": "/accounts/signup/?plan=solo"},
{"name": "Team", "price": "£29", "period": "/month",
"description": "For a finance function of two to ten.",
"features": ["Everything in Solo", "Up to 10 users",
"Late-payment prediction", "Shared chasing inbox"],
"cta_label": "Start free trial",
"cta_url": "/accounts/signup/?plan=team",
"highlighted": True, "badge": "Most popular"},
{"name": "Scale", "price": "£89", "period": "/month",
"description": "Multi-entity, multi-currency, audit trails.",
"features": ["Everything in Team", "Unlimited users",
"Multi-currency", "SAML sign-in", "Audit export"],
"cta_label": "Talk to sales", "cta_url": "/contact/"},
]
MIND THE KEY NAME. The CTA link is `cta_url` in YOUR data, even though the
kwarg the tier card takes is `cta_href`. The wrapper maps one to the other
(`cta_href=tier.cta_url`), and a missing link fails silently as an empty
href rather than loudly, so it is worth getting right first time. If you
prefer the dict form, `{"cta": {"label": ..., "url": ...}}` also works and
wins outright over the flat pair when both are present.
Highlight exactly one tier. `badge` renders only on the highlighted one, and
two highlighted tiers recommend nothing.
WHEN TO SKIP THE WRAPPER. If your prices are static words rather than data,
include _pricing_tier.html once per plan instead: every input except the
feature list is a flat string, so the whole section stays editable in the
template. Looping tier cards is all this wrapper does.
States: see _pricing_table.html and _pricing_tier.html's own headers for
the full states contract (unchanged here: this file is a direct include
of the shipped wrapper, no markup of its own).
Accessibility: see _pricing_table.html/_pricing_tier.html. Covered by
axe.spec.mjs against sections-*.html, which renders this exact file with
a real three-tier tiers list, both themes.
Responsive: see _pricing_table.html's own header for the exact breakpoint
matrix (1 column below md, 2 from md to below lg, 3 from lg upward).
{% endcomment %}
{% include "brickwork_marketing/components/_pricing_table.html" with heading="Pay for the people, not the paperwork" lede="Every plan includes unlimited invoices and automatic reminders." tiers=tiers note="Prices exclude VAT. Annual billing saves two months." %}
Details
| Kind | Section |
|---|---|
| Used in | None (a document skeleton, used everywhere) |
Composed from
| Template | Description |
|---|---|
brickwork_marketing/components/_pricing_table.html |
A row of pricing tiers side by side. |