Feature grid
A responsive grid of equal feature cards, optionally linked.
Try it
Bordered linked cards
Four package cards with visible CTA text.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_feature_grid.html" %}context = {'heading': 'Build from stable parts', 'lede': 'Public interfaces, predictable output.', 'columns': 4, 'variant': 'bordered', 'items': [{'icon': 'check', 'heading': 'Buttons', 'body': 'Validated actions and links.', 'url': '/components/button/', 'cta_label': 'Explore button'}, {'icon': 'sidebar', 'heading': 'Sections', 'body': 'Marketing page building blocks.', 'url': '/components/section/', 'cta_label': 'Explore sections'}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_feature_grid.html" from the installed django-brickwork package.
- Supply item records from the view or wrapper context.
- Choose columns 2, 3 or 4 and optionally bordered chrome.
- Give url only to cards that navigate; use aria_label to clarify a linked card destination.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| 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. |
| items | list of {icon?, heading, body, url?, aria_label?, eyebrow?, meta?, badge?, cta_label?, pending?} | Not set | No | Feature-card records: `{icon?, heading, body, url?, aria_label?, eyebrow?, meta?, badge?, cta_label?, pending?}`. Constraint: Every record needs `heading` and `body`. `aria_label` and `cta_label` apply only with `url`; `icon` must be a registered Brickwork icon name. |
| columns | integer | 3 | No | Requested wide-screen column count. Allowed: 2, 3, 4. Constraint: Allowed values are 2, 3, or 4; other values render the three-column treatment. |
| variant | string | cards | No | Grid chrome: raised `cards` or shared-border `bordered` cells. Allowed: cards, bordered. Constraint: Allowed values are `cards` and `bordered`; other values fall back to cards. |
| items[].url | string | Not set | No | Destination that makes the record’s documented link area interactive. Constraint: No additional template constraint beyond the documented type. |
| items[].aria_label | string | Not set | No | Accessible-name override for a linked record; ignored without its URL. Constraint: Only affects an item that also has a URL. |
| items[].eyebrow | string | Not set | No | Optional overline above the feature heading. Constraint: No additional template constraint beyond the documented type. |
| items[].meta | string | Not set | No | Optional quiet metadata below the feature body. Constraint: No additional template constraint beyond the documented type. |
| items[].badge | string | Not set | No | Optional short status label near the top of a feature card. Constraint: No additional template constraint beyond the documented type. |
| items[].cta_label | string | Not set | No | Visible link reinforcement; only used when the feature has a URL. Constraint: Only renders for an item that also has a URL. |
| items[].pending | boolean | False | No | Applies reduced emphasis to an upcoming feature while preserving its URL behaviour if it has one. Constraint: Keep the accompanying copy clear about why the item is pending. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Section h2 and card h3s preserve outline; icons are decorative. A linked card is one real anchor.
- Responsive
- 1 column below sm, 2 through lg, then 2, 3 or 4 as requested.
- Without JavaScript
- Static HTML; linked cards work without JavaScript.
Need help?
Troubleshooting
The footer CTA text is absent.
Set both item `url` and `cta_label`. The text is only reinforcement for a whole-card link, so it is ignored without a URL.
Explore next