Components / Typography

List

A bulleted, numbered or marker-styled prose list (ul/ol) with token-based spacing and marker colour; check, dash or none markers keep list semantics.

@ruckc/truss-ui Typography

Import

import { List } from '@ruckc/truss-ui';

Playground

Recipe: items with a bold lead-in

Prose lists often open each item with a bold phrase. lead on a ListItem renders it as <strong class="lead"> inside the same li, with the weight, colour and spacing from the theme. A string is shown as text; a snippet renders rich content. leadWeight on the List sets the weight to medium, semibold (the default) or bold.

<List>
  <ListItem lead="Tight scope.">A narrow problem produces a clear interface.</ListItem>
  <ListItem lead="Named states.">Every state the user can reach has a name in the code.</ListItem>
</List>

Recipe: a heavier lead-in

<List leadWeight="bold">
  <ListItem lead="Tight scope.">A narrow problem produces a clear interface.</ListItem>
</List>

Recipe: plain markup without the lead prop

A bare strong inside a plain li still works, and its output does not change. It takes the browser's bold weight and no theme colour or spacing, so prefer lead when the lead-in should match the rest of the design system.

<List>
  <li><strong>Tight scope.</strong> A narrow problem produces a clear interface.</li>
</List>

API

A prose list: a real `ul` (or `ol` when `ordered`) with spacing and marker styling from tokens. Markers: `disc` (default) and `ordered` numbering use native `list-style-type`, so they are drawn by the browser. `check` and `dash` hide the native marker and draw one with `::before`. `none` removes it. Ordered lists always number their items; `marker="none"` removes the numbers. When the marker is removed or replaced (`check`, `dash`, `none`), `role="list"` is set so Safari and VoiceOver still announce the list. Customise with CSS custom properties on the list or any ancestor: `--tr-list-marker-color` (default `--tr-primary`) and `--tr-list-indent` (default `1.25rem`). The default marker colour is the primary token, which reaches at least 3:1 contrast against `--tr-surface` in both the light and the dark theme. A custom colour must meet that bar too. `ListItem`s can open with a bold lead-in (`lead`). `leadWeight` sets its weight, and `--tr-list-lead-color` (default `--tr-on-surface`) sets its colour.

Prop	Type	Default	Description
ordered	boolean	false	Render an `ol` with numbered items instead of a `ul`.
marker	'disc' | 'check' | 'dash' | 'none'	'disc'	Marker style. Ordered lists number their items, so only `none` changes them.
gap	1 | 2 | 3 | 4 | 5 | 6	2	Space between items, from the `--tr-space-*` scale.
size	'sm' | 'md'	'md'	Control size: `sm` (24px), `md` (32px, default) or `lg` (40px).
leadWeight	'medium' | 'semibold' | 'bold'	'semibold'	Weight of `ListItem` lead-ins: `medium` (500), `semibold` (600, the default) or `bold` (700).
class	string	''
children snippet	Snippet	—	`ListItem`s, or plain `li` elements.