/// Typography
List
Styled ordered / unordered list with tokenised spacing and optional icon bullets.
import { List } from "@protocore/pds";Basics
List renders a real ul (or ol when type="ordered") with tokenised spacing and muted mono numerals. Compose rows with List.Item. Use it for prose bullet lists — feature rundowns, requirements, changelog points.
- Ingest the raw transaction feed
- Normalise currencies to the base ledger
- Reconcile against the bank statement
- Settle the cleared batch
Icon bullets
Set a list-level icon to replace the bullet on every item with a glyph — a check mark for a done-list, a dot for a feature list. Each item can override with its own icon, so a single list can mix check and cross marks. The icon slot is decorative (aria-hidden); the item text carries the meaning.
- Multi-tenant CMS wired
- Static export to S3 + CloudFront
- Publish → rebuild webhook (pending)
- Per-tenant access control
Ordered & mono
type="ordered" numbers the items with the system's mono numerals. The mono flag renders item text in the monospace family for machine-flavoured lists (paths, keys, steps in a runbook).
- Open the tenant in the CMS
- Edit the page-builder blocks
- Publish to trigger the static rebuild
- pnpm install
- payload migrate
- next build
When to use it
List is for linear prose lists — a set of peer items where order may or may not matter. When each row is a *label → value* record, use DefinitionList instead. When the list is a *sequence the user walks through*, use Steps; when items are events on a time axis, use Timeline.
It is server-safe and purely presentational. The icon bullets are the one flourish — they replace the marker without breaking the semantic ul/ol, so screen readers still announce a list.
Usage
Do
- Use `ordered` when the sequence carries meaning; `unordered` otherwise.
- Use an `icon` bullet to signal item status (check / cross) at a glance.
- Keep item text meaningful on its own — the icon is decoration.
Don't
- Don't use `List` for label/value records — that's DefinitionList.
- Don't rely on a check vs cross icon alone to convey pass/fail without text.
- Don't nest interactive controls expecting list styling to lay them out — compose Stack.
Accessibility
- Always renders a semantic `ul` or `ol` with `li` children, so assistive tech announces the list and its length.
- Icon bullets are `aria-hidden` decoration; the item's text is its accessible content.
- Ordered lists preserve native numbering semantics — the number is exposed by the platform, not faked in text.
List props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | `List.Item` children. |
className | string | — | |
icon | ReactNode | — | Icon that replaces the bullet for every item (unless the item sets its own). |
mono | boolean | — | Render item text in the monospace family. |
size | enum | md | Text scale: sm 14 · md 16. |
spacing | enum | md | Gap between items: sm 4 · md 8 · lg 12. |
style | CSSProperties | — | |
type | enum | unordered | `unordered` renders a `ul` with markers; `ordered` renders an `ol` with numbers. |
withPadding | boolean | true | Indent the list so markers/icons sit inside the content box. |