Page header
A page h1 with description, action and navigation slots.
Try it
Basic page title
Plain include.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_page_header.html" with title=title description=description %}from django.core.paginator import Paginator
__PAGE__ = Paginator([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42], 10).page(2)
context = {'title': 'Projects', 'description': 'Manage team work.'}
context['page_obj'] = __PAGE__Guide
Add it to your project
- Include it with a non-empty `title`.
- Use an extending wrapper when filling breadcrumb, badge, actions or tabs blocks.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| title | string | Not set | Yes | Page heading. Constraint: Must be non-empty when it supplies an accessible heading; a named title block may replace it. |
| description | string | Not set | No | Supporting copy. Constraint: Keep supporting copy concise; it is omitted when empty and replaced by a skeleton while loading. |
| loading | boolean | False | No | Replaces title and description with skeletons. Constraint: Use only for a temporary loading state and replace it with real or error content. |
| surface | string | Not set | No | Header surface. Allowed: default, tint. Constraint: Use one of the documented surface choices; do not set a consumer CSS class as a substitute. |
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 |
|---|---|
| breadcrumb | Location trail above the title. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| title | The h1 markup and its default title value. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| title_badge | Inline status badge beside the title. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| description | Supporting description markup. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| actions | Page-level action cluster. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| tabs | Panel navigation below the header. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- It emits the page h1; do not add another h1. Skeletons are aria-hidden.
- Responsive
- No breakpoint-specific behaviour.
- Without JavaScript
- Fully rendered heading and description require no JavaScript.
Need help?
Troubleshooting
Contract check: Accessibility: renders the page's own <h1>, so a consuming page must not
Use this as the page h1 and do not add a second h1 in the consuming page.
Explore next