Pricing comparison

All components Marketing Brickwork 4.3.1

Try it

Existing-path comparison

Open full-page preview

Keeps a legacy include path while forwarding core context.

Plans

Plan comparison. Scroll sideways to see every plan.
Capability	{'name': 'Starter'}
Projects

Use only to preserve an established marketing include path. New pages should include brickwork/components/_comparison_table.html directly.

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_comparison.html" with heading=heading plans=plans rows=rows %}

context = {'heading': 'Plans', 'plans': [{'name': 'Starter'}], 'rows': [{'label': 'Projects', 'values': ['1']}]}

Guide

Add it to your project

Use the public include path "brickwork_marketing/components/_pricing_comparison.html" from the installed django-brickwork package.
For new work, read the core comparison table contract.
For an existing marketing call site, include this wrapper and supply the core plans, rows and headings context.
Retain or set heading_id when a page targets the default id.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
plans	list	Not set	Yes	Column headers after the leading capability column. Constraint: Supply plain strings. `highlighted` may name one exact plan or use its zero-based index.
rows	list	Not set	Yes	Comparison rows of `{label, cells}`. Each cell is text or `{included: true\|false}` for an announced tick or dash. Constraint: Every row needs `label` and `cells`; keep the cells in plan-column order. An empty plans or rows list emits no table.
highlighted	string	Not set	No	Marks the recommended pricing plan and promotes its CTA treatment. Constraint: No additional template constraint beyond the documented type.
highlighted_label	string	Not set	No	Visible label explaining the highlighted comparison column. Constraint: Use only with the highlighted comparison column.
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.
note	string	Not set	No	Fine print under the pricing or comparison table. Constraint: No additional template constraint beyond the documented type.
caption	string	Not set	No	Accessible table caption for the pricing comparison. Constraint: No additional template constraint beyond the documented type.
heading_id	string	bw-pricing-comparison-heading	No	Unique ID for the comparison heading, used to label the delegated core table. Constraint: Keep IDs unique when several comparisons share a page.

Behaviour

Accessibility and responsive behaviour

Accessibility: Delegates to the core comparison-table accessibility contract.
Responsive: Delegates to the core comparison-table responsive contract.
Without JavaScript: Delegates to the core component.

Need help?

Troubleshooting

A matrix cell renders incorrectly.

Use the core `comparison_table` plans and rows dictionary shapes. This marketing path delegates to that component rather than accepting a separate schema.

Explore next