i

Item list

Organising content · researched

A list of rows, each with a headline, supporting text and optional actions, to read or choose from.

molecule · Carbon: Contained list · also called Resource list

"Contained" describes Carbon layout; "Item list" says the job.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

List native: yes antd 6.6.5
Variants
—
Sizes
default, large, small
States documented
loading
Accessibility guidance
no

Docs mark List as deprecated, to be removed in the next major, and point to Listy (new in 6.6.0, virtualised/grouped, div-based). List renders ul with li items (div items in grid mode).

docs ↗ · code ↗

Carbon

List native: yes @carbon/react 1.117.0
Variants
Unordered list, Ordered list
Sizes
productive, expressive
States documented
—
Accessibility guidance
yes

OrderedList and UnorderedList render ol and ul with ListItem as li. Structured list and Contained list are separate docs pages and components.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/list/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/OrderedList"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/list/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/OrderedList"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Summary list subset native: yes govuk-frontend 6.5.1
Variants
no borders (govuk-summary-list--no-border), with row actions, summary card
Sizes
—
States documented
default
Accessibility guidance
no

Summary list is a dl of dt/dd rows (description list). Bulleted and numbered lists exist only as CSS classes on the Lists style page; Task list is a separate ul component for task rows.

1 corrected on re-read
  • variants: null → ["no borders (govuk-summary-list--no-border)","with row actions","summary card"] page sections: Adding actions to each row, Removing the borders, Summary cards

docs ↗ · code ↗

Material Web

Lists (<md-list>, <md-list-item>) native: partly @material/web 2.5.0
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
yes

List container is a custom element whose role=list is set through ElementInternals; each item renders a native li, button or anchor in its shadow root depending on type (text, button, link). Page shows icon, avatar and image item layouts.

docs ↗ · code ↗

Primer

ActionList subset native: partly @primer/react 38.40.1
Variants
inset, horizontal-inset, full
Sizes
medium, large
States documented
default, disabled, loading, active
Accessibility guidance
yes

ActionList is a vertical list of interactive actions or options (the closest to a list); there is no plain content list. Renders ul/li, with role overridden for menu or listbox use. variants are list variant values; sizes are Item size values; Item variant adds default, danger. NavList is the navigation sibling. Internal-only ListView/SimpleListView/NestedListView are excluded.

1 corrected on re-read
  • alias_kind: "contested" → "subset" Independent decision; prior was contested

docs ↗ · code ↗

Spectrum

List view superset native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
default, hover, focus, disabled
Accessibility guidance
no

Only an interactive collection (selection, actions, drag and drop), not a plain ordered or unordered list; no static list component found on the design site, SWC or S2. Native check: S2 ListView is React Aria GridList, divs with role=grid; the rsp page has no Accessibility section.

docs ↗ · code ↗

USWDS

List native: yes @uswds/uswds 3.14.0
Variants
.usa-list--unstyled
Sizes
—
States documented
default
Accessibility guidance
yes

Wraps native ul/ol. Related components: Icon list, Process list, Collection.

docs ↗ · code ↗

Platform facts

Native elementul, ol, menuSpec: ul/ol contain li; menu is 'a semantic alternative to ul to express an unordered list of commands'. MDN: ul and ol have implicit role list. Description pairs are dl (see description-list). Interactive lists (listbox, grid) are separate APG patterns.
Baseline—
APG patternnone
ARIA rolelist
Shipped by7 of 7 systems

Anatomy

  1. list — ul, ol or dl; spec ul = order not important, ol = intentionally ordered.
  2. list item — li element.

The seven states

default Static content.
hover n/a — Not interactive.
focus n/a — Not focusable.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.