Section
Bleed soft stage
A copied section band. Paste it in, then own every line: it never upgrades under semver.
Invoicing
A stage that runs edge to edge
width=bleed composes with atmosphere=soft-stage: the wash and grid now spans the full viewport instead of stopping at the marketing rail.
{% comment %}
HERO / bleed soft-stage: the centred soft-stage hero with the wash-and-grid
layer running edge to edge of the viewport, instead of stopping at the
marketing content rail.
WHEN TO USE THIS INSTEAD OF THE PLAIN SOFT-STAGE HERO. When the opening band
is the page's flagship fold and the desktop viewport is wide: the plain
soft-stage hero (sections/hero/soft-stage.html) clips its wash-and-grid layer
to the marketing measure, which reads as a hard vertical edge on either side
at desktop widths (icvoss/django-brickwork#710). This one lets the atmosphere
run the full width of the viewport while the copy stays on the marketing
measure and gutter, matching the reference fold the atmosphere was built for.
This one is the shipped _hero.html component with width="bleed" composed
with atmosphere="soft-stage" (ADR-057 section 1a, BR-BW-MKT-007,
icvoss/django-brickwork#710): width="bleed" emits bw-hero--bleed on the root,
reusing _section.html's fluid 100vw escape (capped at the marketing measure),
so the hero box, and therefore the .bw-stage layer inside it, spans the
viewport. width="bleed" is a CSS-only axis: no markup changes, so it composes
with every other hero option, not atmosphere alone.
Required context: none. Optional context: see _hero.html's own header for
the full Optional context list this include accepts.
States: see _hero.html's own header for the full states contract; this
example fixes width="bleed", atmosphere="soft-stage" and align="center".
Accessibility: see _hero.html; the heading renders as the page's own <h1>.
The .bw-stage layer is aria-hidden and pointer-events: none, so it never
enters the accessibility tree, unaffected by the width axis. Covered by
axe.spec.mjs against sections-*.html, both themes; the viewport-escape
geometry is proved live by a11y/marketing_bleed.spec.mjs against the
dedicated hero-bleed-soft-stage-<theme>.html fixture.
Responsive: the bleed escape is fluid at every width (100vw, capped); the
copy stays on the marketing measure and gutter inside it. No breakpoint
switch of its own.
{% endcomment %}
{% include "brickwork_marketing/components/_hero.html" with align="center" eyebrow="Invoicing" heading="A stage that runs edge to edge" lede="width=bleed composes with atmosphere=soft-stage: the wash and grid now spans the full viewport instead of stopping at the marketing rail." primary_cta_label="Start free trial" primary_cta_href="/accounts/signup/" secondary_cta_label="Book a demo" secondary_cta_href="/demo/" width="bleed" atmosphere="soft-stage" %}
Details
| Kind | Section |
|---|---|
| Used in | None (a document skeleton, used everywhere) |
Composed from
| Template | Description |
|---|---|
brickwork_marketing/components/_hero.html |
A page-opening band with a heading, lede, and call to action. |