Directory
An ordered package or resource directory with optional mark and metadata column.
Try it
Package index
Linked names and installation metadata.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_directory.html" %}context = {'heading': 'Packages', 'lede': 'Composable Django UI.', 'items': [{'number': '01', 'icon': 'folder', 'heading': 'django-brickwork', 'url': '/packages/django-brickwork/', 'body': 'Accessible server-rendered UI.', 'version': '4.2.0', 'status': 'Stable', 'install': 'pip install django-brickwork'}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_directory.html" from the installed django-brickwork package.
- Supply items from view context because they are list-shaped.
- Use logo for safe image or SVG markup, otherwise an icon registry name.
- Use url only on the entry title, not the entire row.
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 {number?, icon?, logo?, heading, url?, body?, version?, status?, install?} | Not set | No | Directory records: `{number?, icon?, logo?, heading, url?, body?, version?, status?, install?}`. Constraint: Every record needs `heading`. `logo` is trusted HTML and takes precedence over `icon`; `install` is displayed as code. |
| items[].number | string or integer | Not set | No | Visible ordinal; the loop counter is used when it is absent. Constraint: No additional template constraint beyond the documented type. |
| items[].icon | registered icon name | Not set | No | Registered Brickwork icon name; it is rendered decoratively. Constraint: Use a name in the Brickwork icon registry. |
| items[].logo | safe HTML | Not set | No | Trusted image or SVG markup for an entry logo; it takes precedence over the registered item icon. Constraint: Caller owns escaping; logo takes precedence over `items[].icon`. |
| items[].heading | string | Not set | No | Entry heading rendered for this record. Constraint: No additional template constraint beyond the documented type. |
| 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[].body | string | Not set | No | Optional explanatory text for this record. Constraint: No additional template constraint beyond the documented type. |
| items[].version | string | Not set | No | Optional version metadata. Constraint: No additional template constraint beyond the documented type. |
| items[].status | string | Not set | No | Optional status metadata. Constraint: No additional template constraint beyond the documented type. |
| items[].install | string | Not set | No | Optional install command, rendered in a code element. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Real ordered list with h2 and h3 hierarchy. Icons are decorative; supplied logos need suitable alt text.
- Responsive
- Stacks below md; four columns from md.
- Without JavaScript
- Static HTML; no JavaScript required.
Need help?
Troubleshooting
An entry shows an icon instead of its logo.
Supply safe `logo` markup for that item. Logo takes precedence over `icon`; ensure the markup has suitable alternative text.
Explore next