Skip to content
Protocore Design Systemv1.6.9
Patterns / Blog index

Blog index

A filterable index of writing: a page header, a chip filter bar, a stack of listing rows, and pagination.

BLOG-INDEX
Live · @protocore/pds
Writing

Field notes

Protocol design, settlement engineering, and the craft of operable software.

Topic

When to use

A listing page turns a collection into something scannable: a header that names the set, a chip filter to narrow it, a stack of rows that read cleanly at a glance, and pagination to keep the page short. The rows carry only what helps the reader choose — title first, then mono metadata trailing right. Try the topic chips and the pager above; both are live.

Use it for blog and changelog indexes, docs collections, search results, and any browseable list. When rows represent records to operate on rather than read, reach for the console DataTable instead.

Structure

01
Page header
A PageHeader with an Eyebrow, the collection title, and a one-line lead framing what the list is.
02
Filter bar
A single-select FilterBar of chips scopes the list; selecting a chip resets to the first page.
03
Listing rows
A stack of ListingRows — ink title, trailing secondary + muted meta cells, and an outbound arrow.
04
Pagination
A numbered Pagination keeps the page short and reports where the reader is in the set.

Key components

Open any component to read its full API and live examples.