Cta

Documentation

All components Marketing Brickwork 4.3.1

Try it

Centred closing CTA

Open full-page preview

Tinted, contained sales close.

Ready to build with Brickwork?

Install the package and compose your first page.

Get started View components

Use to close a marketing page with a clear next 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/_cta.html" %}

context = {'heading': 'Ready to build with Brickwork?', 'body': 'Install the package and compose your first page.', 'primary_cta_label': 'Get started', 'primary_cta_href': '/docs/', 'secondary_cta_label': 'View components', 'secondary_cta_href': '/components/'}

Guide

Add it to your project

Use the public include path "brickwork_marketing/components/_cta.html" from the installed django-brickwork package.
Load brickwork_components is handled by the component.
Include with heading and either CTA object or flat label/href fields.
Set width="bleed" only when the page needs an edge-to-edge close.
Use band="plain" and align="start" for a quieter contact close.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
heading	string	Not set	Yes	Reason to render the band. Constraint: No additional template constraint beyond the documented type.
body	string	Not set	No	Supporting plain-text paragraph. Constraint: No additional template constraint beyond the documented type.
primary_cta	object {label, url}	Not set	No	Takes precedence over flat fields. Constraint: Use either this object or its flat pair. If both are supplied, this object wins.
primary_cta_label	string	Not set	No	Visible label for the template-authorable primary CTA. Constraint: Supply `primary_cta_href` too; ignored when `primary_cta` is present.
primary_cta_href	string	Not set	No	Destination for the flat primary CTA; pair it with `primary_cta_label`. Constraint: Supply `primary_cta_label` too; ignored when `primary_cta` is present.
secondary_cta	object {label, url}	Not set	No	Secondary CTA object with exactly `label` and `url`; it overrides the flat secondary fields. Constraint: Use either this object or its flat pair. If both are supplied, this object wins.
secondary_cta_label	string	Not set	No	Visible label for the template-authorable secondary CTA. Constraint: Supply `secondary_cta_href` too; ignored when `secondary_cta` is present.
secondary_cta_href	string	Not set	No	Destination for the flat secondary CTA; pair it with `secondary_cta_label`. Constraint: Supply `secondary_cta_label` too; ignored when `secondary_cta` is present.
band	string	tint	No	CTA background: `tint` gives the marketing-tint band and `plain` uses the page surface. Allowed: tint, plain. Constraint: Allowed values are `tint` and `plain`; unsupported values use the documented default behaviour.
width	string	contained	No	Contained or full-bleed band. Allowed: contained, bleed. Constraint: Allowed values are `contained` and `bleed`.
align	string	center	No	Copy and actions alignment. Allowed: center, start. Constraint: Use only this component’s documented choices.

Behaviour

Accessibility and responsive behaviour

Accessibility: Heading is h2; contained buttons keep their own accessible labels.
Responsive: Actions flex-wrap when space narrows; bleed is fluid at every width.
Without JavaScript: Static band; button links work without JavaScript.

Need help?

Troubleshooting

A CTA button does not render.

Provide a complete object with `label` and `url`, or provide the matching flat label and href fields together.

Explore next