Card
The elevated composition surface for grouped content.
Try it
Linked summary
A whole-card destination with no nested header action.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_card.html" with title=title body=body href=href surface=surface elevation=elevation size=size radius=radius media_recipe=media_recipe media_icon=media_icon interactive=interactive bordered=bordered %}context = {'title': 'Release notes', 'body': 'Read what changed in 4.2.', 'href': '/components/card/', 'surface': 'raised', 'elevation': '1', 'size': 'md', 'radius': 'default', 'media_recipe': 'icon', 'media_icon': 'folder', 'interactive': False, 'bordered': False}Guide
Add it to your project
- For simple content, include it with context variables.
- For rich regions, create a project template extending the partial and fill its named blocks.
- Do not place header actions inside a whole-card href.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| title | str | Not set | No | Include-path heading; the title block overrides it. Constraint: Must be non-empty when it supplies an accessible heading; a named title block may replace it. |
| surface | str | Not set | No | Fill treatment. Allowed: default, raised, tint, inverse, muted. Constraint: Use one of the documented surface choices; do not set a consumer CSS class as a substitute. |
| elevation | str | 1 | No | Shadow ladder. Allowed: 0, 1, 2, 3. Constraint: Allowed values: `0`, `1`, `2`, `3`. |
| size | str | Not set | No | Padding scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| radius | str | Not set | No | Corner scale. Allowed: default, sm, lg, xl, none. Constraint: Allowed values: `default`, `sm`, `lg`, `xl`, `none`. |
| header_recipe | str | Not set | No | Header region treatment. Allowed: none, plain, bordered, muted, inverse, accent. Constraint: Use `plain`, `muted`, or `bordered` only. |
| footer_recipe | str | Not set | No | Footer treatment. Allowed: none, plain, muted, actions. Constraint: Use `plain`, `muted`, or `actions` only. |
| media_recipe | str | Not set | No | Media treatment. Allowed: none, bleed, inset, icon. Constraint: Allowed values: `none`, `bleed`, `inset`, `icon`. |
| media_src | str | Not set | No | Trusted image URL for bleed or inset media. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| media_alt | str | Not set | No | Alternative text for image media. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| media_icon | str | Not set | No | Registered Brickwork icon for icon media. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| body | str | Not set | No | Simple body copy. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| caption | str | Not set | No | Simple footer copy. Constraint: Describe the specimen when a visible figure caption adds context. |
| action_label | str | Not set | No | Simple header action text. Constraint: Provide this only with its matching action URL and make the result clear. |
| action_href | str | Not set | No | Simple header action URL. Constraint: Provide this only with its matching action label and a valid destination. |
| interactive | bool | False | No | Raises elevation on hover and focus within. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| href | str | Not set | No | Makes the whole card a link. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields. |
| bordered | bool | False | No | Adds hairline border. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
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 |
|---|---|
| media | Rich media region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| header | Rich header region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| title | Heading region. Constraint: Must be non-empty when it supplies an accessible heading; a named title block may replace it. |
| actions | Header actions region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| body | Rich body region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| footer | Rich footer region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- A linked card is a real anchor, and its package header action is suppressed to avoid nested interactive content.
- Responsive
- No breakpoint switch; size uses a fixed token scale.
- Without JavaScript
- Static link behaviour works without JavaScript.
Need help?
Troubleshooting
Contract check: boundary: brickwork does not validate URL schemes; href values are
Validate user-supplied `href` values before rendering an interactive card; the template emits them unchanged.