Product applications
Console
A finished page under Kiln. Copy it and it is yours outright: unlike a brickwork component or shell, it never upgrades under semver.
Skip to main content
Reports
Saved reports you can re-run and share.
No saved reports yet
Build a report from any list view and save it here to re-run it later or share it with your team.
Create a reportScroll inside the frame to inspect the full page.
{% extends "brickwork/shell/app.html" %}
{% comment %}
A blank slate: a section that has no data in it yet.
COPY THIS FILE into your project and edit it. It is not on the template loader
path, so you cannot extend it (ADR-056).
What your view must supply:
nav_items / nav_active as in list.html
The empty state distinguishes "nothing has ever been created here" (no_data,
which offers an onboarding action) from "your filter matched nothing"
(no_results, which offers a way to clear the filter). Use the right one: they
are different situations and a user reads them differently.
Its heading and body are REQUIRED and have no defaults, deliberately. brickwork
will not invent copy about a feature it knows nothing about, and a generic "No
items" helps nobody.
States: this page's own state IS an empty state (no_data variant); the
composed _empty_state.html carries its own icon/heading/body/action
states, documented in that component's own header.
Accessibility: inherits shell/app.html's skip link, sidebar/drawer nav and
page-header region; the empty state's icon is decorative, heading and
body carry the meaning in words. Covered by the archetype harness's full
gate sweep (render, axe WCAG 2.2 AA, no horizontal overflow, light/dark
distinctness, skip-link first-tab-stop with JS disabled) at every W0.1
breakpoint, both themes; the size="sm" in-panel empty-state shape is
additionally covered directly by axe.spec.mjs against
console-sm-*.html.
Responsive: no breakpoint switch of its own; inherits shell/app.html's
sidebar-to-drawer collapse at --bw-breakpoint-md (48rem).
{% endcomment %}
{% load brickwork_nav %}
{% block page_title %}Reports - Northwind{% endblock %}
{% block sidebar %}{% bw_nav nav_items nav_active %}{% endblock %}
{% block sidebar_mobile %}{% bw_nav nav_items nav_active %}{% endblock %}
{% block brand_wordmark %}Northwind{% endblock %}
{% block page_header %}
{% include "brickwork/components/_page_header.html" with title="Reports" description="Saved reports you can re-run and share." %}
{% endblock %}
{% block content %}
<div class="bw-section-stack">
{% include "brickwork/components/_empty_state.html" with variant="no_data" icon="file" heading="No saved reports yet" body="Build a report from any list view and save it here to re-run it later or share it with your team." action_label="Create a report" action_href="/reports/new/" %}
</div>
{% endblock %}
Details
| Kind | Page example |
|---|---|
| Used in | Product applications |
Composed from
| Template | Description |
|---|---|
brickwork/components/_empty_state.html |
A placeholder for a list or panel with nothing to show yet. |
brickwork/components/_page_header.html |
A page's title, description, and action row. |
brickwork/nav/_nav.html |
Not a catalogue component |
brickwork/shell/app.html |
The authenticated app shell: sidebar, topbar, and content region. |