/// Data Display
NumberedRow
An enumerated [ NN ] row with a title, optional body, and a right-aligned meta slot.
import { NumberedRow } from "@protocore/pds";Basics
Pass an index, a title, and optional body copy as children. Each row sits under a bottom hairline, with the number rendered as a zero-padded [ NN ] bracket in column one.
Meta slot
The meta slot is right-aligned and accepts any node — a Tag, timestamp, or count. Use it for provenance that shouldn't compete with the title.
Interactive rows
Give a row an href and it renders as an anchor; the whole row dims to 0.6 on hover as a CSS-only affordance (no React hover state). Ideal for changelog and index listings.
When to use it
Reach for NumberedRow when the ordinal matters — numbered terms and policy clauses, ranked results, FAQ entries, or a changelog where readers cite "item 3". The [ NN ] bracket makes the sequence scannable and quotable.
If the row is a flat record with no meaningful order (a job posting, an endpoint, a table line), use ListingRow — its columnar meta cells and trailing ↗︎ suit scannable lists better. For key/value facts with no ordering at all, use DefinitionList; for a time-ordered sequence with connective rules, use Timeline.
Usage
Do
- Use it where the number is load-bearing — clauses, ranked items, cited FAQ entries.
- Keep the body to roughly one measure (≤64ch) so rows stay scannable.
- Put provenance (timestamp, tag, count) in the `meta` slot, not the title.
- Add `href` only when the whole row navigates somewhere.
Don't
- Don't renumber rows manually inside the title — pass `index`.
- Don't use it for unordered records; that's ListingRow's job.
- Don't stack interactive controls inside the meta slot of an `href` row — the whole row is already the target.
- Don't pad ordinals inconsistently; keep one `pad` width across a set.
Accessibility
| Keys | Action |
|---|---|
| Tab | Moves focus to the row when it is interactive (has an href). |
| Enter | Activates the row link (native anchor behavior). |
- A non-interactive row is a plain container — no role is imposed on it.
- The `[ NN ]` bracket is decorative context; keep the meaningful label in `title` so it is read first.
- Hover dimming is purely visual; focus-visible rings come from the base focus policy on the anchor.
NumberedRow props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Optional secondary body copy shown under the title. |
className | string | — | |
href | string | — | When set, the row renders as an anchor and gains the interactive hover. |
index * | string | number | — | Row number shown as `[ NN ]` in column one. Numbers are zero-padded. |
meta | ReactNode | — | Right-aligned meta slot (timestamp, tag, count…). |
pad | number | 2 | Zero-pad width for a numeric index. |
style | CSSProperties | — | |
title * | ReactNode | — | Primary label for the row. |