# NumberedRow
- **Category:** Data Display (`data-display`)
- **Slug:** `data-display/numbered-row`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { NumberedRow } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/data-display/numbered-row
> An enumerated [ NN ] row with a title, optional body, and a right-aligned meta slot.
## 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**.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | Optional secondary body copy shown under the title. |
| `className` | `string` | no | — | — |
| `href` | `string` | no | — | When set, the row renders as an anchor and gains the interactive hover. |
| `index` | `string \| number` | yes | — | Row number shown as `[ NN ]` in column one. Numbers are zero-padded. |
| `meta` | `ReactNode` | no | — | Right-aligned meta slot (timestamp, tag, count…). |
| `pad` | `number` | no | `2` | Zero-pad width for a numeric index. |
| `style` | `CSSProperties` | no | — | — |
| `title` | `ReactNode` | yes | — | Primary label for the row. |
## Examples
### 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.
```tsx
import { NumberedRow } from "@protocore/pds";
export default function NumberedRowBasics() {
return (
The source chain records the packet and emits a commit event to the verifier set.
A quorum of the DVN signs the payload hash; signatures are aggregated off-chain.
The executor submits the proof and the message is applied atomically at the endpoint.
);
}
```
### 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.
```tsx
import { NumberedRow, Tag } from "@protocore/pds";
export default function NumberedRowMeta() {
return (
terms}>
You must be legally permitted to operate a validator in your jurisdiction.
terms}>
Double-signing or prolonged downtime forfeits a portion of the bonded stake.
terms}>
The protocol is provided on an as-is basis without warranties of any kind.
);
}
```
## 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
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Moves focus to the row when it is interactive (has an href). |
| `Enter` | Activates the row link (native anchor behavior). |
**Notes**
- 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.
## Related
`listing-row`, `definition-list`, `timeline`, `code-ref`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/