List item
A reusable media-list row with title, supporting facts, optional image, and trailing controls.
Try it
Linked article row
An editorial list item with metadata.
Building accessible controls
A practical guide to semantic interaction patterns.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_list_item.html" with title=title href="/articles/accessibility/" meta=meta summary=summary media_src="/static/article.jpg" media_alt=media_alt %}context = {'title': 'Building accessible controls', 'meta': '8 min read', 'summary': 'A practical guide to semantic interaction patterns.', 'media_alt': 'Keyboard on a desk'}Guide
Add it to your project
- Supply `title`.
- Include with simple metadata and summary, or extend for rich media/body/actions.
- Set `heading_level` to match the surrounding document outline.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| title | str | Not set | Yes | Item heading text. Constraint: Must be non-empty when it supplies an accessible heading; a named title block may replace it. |
| href | str | Not set | No | Title destination. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields. |
| meta | str | Not set | No | Caption line. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| summary | str | Not set | No | Supporting copy. 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 | Alias for summary. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| media_src | str | Not set | No | Thumbnail image URL. 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 | Required alternative text for content thumbnail. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| media | SafeString|template block | Not set | No | Custom media markup. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| actions | SafeString|template block | Not set | No | Trailing controls. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| heading_level | int | 3 | No | Heading level for title. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| density | str | comfortable | No | Row density. Allowed: comfortable, compact. Constraint: Allowed values: `comfortable`, `compact`. |
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 | Media region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| body | Body region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| actions | Actions region. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Only the title becomes the link, and the title uses a real heading. Content thumbnails need meaningful alternative text.
- Responsive
- Rows stack below the small breakpoint; image-and-body layout begins at small screens.
- Without JavaScript
- Static content and title link work without JavaScript.
Need help?
Troubleshooting
Contract check: only the title is the link. Covered by axe.spec.mjs against
Keep the primary destination on the title. Do not assume body or media becomes part of the anchor.
Explore next