Skip to main content
MACAW

List

Templatebeta@macaw-ds/blocks · since 0.1.0

Structure for a list page: header with one primary action, a search and filter toolbar, and rows on a card.

A PageHeader, a toolbar row with a labelled search Input and a Filter button, and the list region on a layer-1 Card with no padding. Placeholder rows are a semantic ul laid out on the 12-column grid with Text and Badge. Renders the main area only: AppShell, TopBar and main come from the root layout.

Filled by pages

No page fills this template yet.

When to use

  • A collection the user scans, searches and filters: invoices, customers, payouts.
  • Rows with a name, a status and one figure.

When not to use

  • Comparing many columns of numbers: wait for the Table component instead of faking one with a grid.
  • A single record: use the record template.

Rules

Hard rules for this composition. Keep them when you adapt the copy in your repo.

  1. Render inside AppShell's main; never add a second main or a TopBar.
  2. The PageHeader title is the page's only h1.
  3. At most one primary Button on the page, in the PageHeader actions.
  4. The search Input needs an aria-label (or a visible label).
  5. Keep the list a semantic ul with one li per row; amounts use Text numeric with align end.