Hero
The primary marketing headline block, supporting actions and optional media.
Try it
Split product hero
Side-by-side copy and actual vector interface media.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_hero.html" %}context = {'eyebrow': 'Brickwork UI', 'eyebrow_marker': 'rule', 'heading': 'Build reliable Django interfaces.', 'subheading': 'A component substrate for server-rendered products.', 'lede': 'Compose pages from current public contracts.', 'primary_cta_label': 'Read docs', 'primary_cta_href': '/docs/', 'secondary_cta_label': 'Browse components', 'secondary_cta_href': '/components/', 'media_placement': 'beside', 'media_shape': 'default', 'media': '<svg viewBox="0 0 640 400" role="img" aria-label="Brickwork component interface"><rect width="640" height="400" fill="#eef2ff"/><rect x="32" y="32" width="576" height="336" rx="16" fill="#ffffff"/><rect x="64" y="78" width="180" height="22" rx="8" fill="#4f46e5"/></svg>'}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_hero.html" from the installed django-brickwork package.
- Include in the marketing content area.
- Pass heading for the page h1 and flat CTA fields when writing a template directly.
- Pass safe media HTML only after escaping or sanitising it.
- Select media_placement for layout, then compose it with media_shape, decoration and eyebrow settings.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| eyebrow | string | Not set | No | Optional overline above the hero heading. Constraint: No additional template constraint beyond the documented type. |
| heading | string | Not set | No | The page headline, rendered as this page’s sole hero `<h1>`. Constraint: Compose one hero per page; use a section h2 component for later page bands. |
| subheading | string | Not set | No | Stronger positioning line between the hero heading and lede. Constraint: No additional template constraint beyond the documented type. |
| lede | string | Not set | No | Short supporting copy below the section heading. Constraint: No additional template constraint beyond the documented type. |
| primary_cta | object {label, url} | Not set | No | Preferred CTA object with exactly `label` and `url`; it overrides the flat primary 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. |
| meta | string or safe HTML | Not set | No | Quiet status or fact line below hero actions. It may be trusted HTML and wins over `meta_items`. Constraint: Takes precedence over `meta_items` when both are supplied. |
| meta_items | list of strings | Not set | No | List of hero facts separated by decorative middle dots when `meta` is absent. Constraint: Only used when `meta` is absent. |
| media | safe HTML | Not set | No | Pre-rendered safe HTML in the hero media slot. Constraint: Caller owns escaping; omit it for a text-only hero. |
| decoration | safe HTML | Not set | No | Decorative, rendered aria-hidden. Constraint: Caller owns escaping. It is rendered aria-hidden and must never carry meaningful content. |
| eyebrow_marker | string | none | No | Leading overline marker. Allowed: none, rule. Constraint: Allowed values are `none` and `rule`. |
| eyebrow_tone | string | accent | No | Hero overline voice: uppercase accent treatment or muted sentence-case treatment. Allowed: accent, sentence. Constraint: Allowed values are `accent` and `sentence`. |
| align | string | start | No | Controls hero copy and actions on the inline start, centre, or end. Allowed: start, center, end. Constraint: Use only this component’s documented choices. |
| media_placement | string | below | No | Places media below, behind, beside, or visually above hero copy; document order remains copy then media. Allowed: below, behind, beside, above. Constraint: Allowed values are `below`, `behind`, `beside`, and `above`. |
| media_shape | string | default | No | Image framing: normal rounded media or the square-cropped circular portrait treatment. Allowed: default, circle. Constraint: Allowed values are `default` and `circle`. |
| atmosphere | string | none | No | Decorative background layer. Allowed: none, soft-stage. Constraint: Allowed values are `none` and `soft-stage`; unknown values fall back to none. |
| reveal | string | none | No | CSS entrance treatment. Allowed: none, enter. Constraint: Allowed values are `none` and `enter`; unknown values fall back to none. |
Named blocks
Fill these only when you extend the component template. They are not values passed to an include or tag.
| Block | What it replaces |
|---|---|
| eyebrow | Replaces the hero eyebrow. |
| heading | Replaces the component heading. |
| subheading | Replaces the hero positioning line. |
| lede | Replaces the supporting lede. |
| actions | Replaces the CTA action region. |
| meta | Replaces the hero meta region. |
| decoration | Replaces the decorative hero layer. |
| media | Replaces the hero media slot. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Heading is h1. Decorative content is aria-hidden; informative media must carry its own accessible name.
- Responsive
- Below, behind and above apply at every width. Beside stacks below md (48rem) and becomes a two-column grid from md.
- Without JavaScript
- All placements render without JavaScript. Reveal has a resting no-JS and reduced-motion state.
Need help?
Troubleshooting
Hero media has poor readability behind copy.
Use `media_placement="behind"` rather than adding custom overlays. The component supplies its inverse surface and contrast scrim.
Explore next