Section
Centred band
A copied section band. Paste it in, then own every line: it never upgrades under semver.
Stop writing chase emails
Free for 30 days. No card, no setup call, no data import to sit through.
Copy into your project. This example is not on the template loader path.
{% comment %}
CTA / centred band: the tinted band that closes a page.
Beat Phase D journey: Marketing CTA (icvoss/django-brickwork#544). Dual CTA
(primary + secondary) on the tinted band. Recolour by overriding brand tokens
only (`--bw-color-accent`, `--bw-color-surface-marketing-tint`, and the rest
of the brand-pack delta); do not fork this markup or marketing.css. See
docs/examples/brand-pack/ and docs/BRANDING.md.
The shipped _cta.html already is this, so the example is the include.
band="tint" is the default and composes --bw-color-surface-marketing-tint,
which is contrast-checked in both themes. Pass band="plain" to sit the same
content on the page surface instead, when the page already has enough bands.
A heading is REQUIRED: with no heading the component renders nothing at all
rather than an empty band. That is deliberate across this kit.
States: none of its own: see _cta.html's own header (the include this file
wraps) for the full states/accessibility/responsive contract, unchanged
here.
Accessibility: see _cta.html.
Responsive: see _cta.html; band="tint" and width (defaulted here to
"contained") are the same CSS-only axes documented there.
{% endcomment %}
{% include "brickwork_marketing/components/_cta.html" with heading="Stop writing chase emails" body="Free for 30 days. No card, no setup call, no data import to sit through." primary_cta_label="Start free trial" primary_cta_href="/accounts/signup/" secondary_cta_label="Talk to us" secondary_cta_href="/contact/" %}
Details
| Kind | Section |
|---|---|
| Used in | None (a document skeleton, used everywhere) |
Composed from
| Template | Description |
|---|---|
brickwork_marketing/components/_cta.html |
A call-to-action band with a heading and buttons. |