Products · Genus Examples

The rules — the data-grid page

GRID view is for VISUAL, card-shaped records (products, media, templates) — the row list (the data-list page) stays the default for everything else. The view is a PAGE decision (lister-view="grid"), never a user toggle.
Cards are equal-height per row: build them .d-flex.flex-column.h-100 with .mt-auto pushing the price/footer row down; lister-grid-min sets the minimum column width. (h-100 is legal HERE — a plain flex div inside a grid cell, no card margin; for real .cards in a .row use .card-row + .card-fill — cards.)
lister-paging="more" (the load-more button, appends) fits grids — and any endpoint that reports only more instead of a total.
Selection is SINGLE (click the card); the primary action rides the primary option — Enter (or o) opens the details OFFCANVAS. While it is open, list shortcuts are silenced automatically.
The shell is THE STANDARD SHELL (lister.md "Page markup"; the full form on the data list) minus the list card — cards are their own surfaces: the toolbar inside .lister-main (the Filters toggle, icon + word, on the left; single actions on the right), the panel as two cards — Filters (title + the lister-reset Reset link + the close button; the search, then the filters) and Display (order) — and the count + the load-more button on the .lister-footer line under the cards.
The panel starts COLLAPSED (lister-panel-collapsed) when filters are secondary. Radio groups and switches are filters by their name alone — no wiring; Reset brings them back to their authored values (All, off) with zero page code.
The per-card action button is quiet (.btn-soft-outline-secondary, full width under the content) — one per card, more actions belong in the details offcanvas.
Empty, loading and error states are the lister's own — never rebuild them (states).