1 viewer
Back to Components
Component · Layout

List

Ordered or unordered collection display.

Category
Layout
Slots
3
States
1
Writer
Shared
cre8.primitive.list

Preview

Live renderShared SSR + WASM writers
Recent Operations
  • Block GenesisBlock #0 recorded in HyperDB
  • Zero-Knowledge STARK VerificationExecution trace verified
  • P2P Atom Gossip32KB package synced
<List title="Recent Operations">
  <ListItem subtitle="Block #0 recorded in HyperDB" title="Block Genesis" />
  <ListItem
    subtitle="Execution trace verified"
    title="Zero-Knowledge STARK Verification"
  />
  <ListItem subtitle="32KB package synced" title="P2P Atom Gossip" />
</List>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-list
title.primitive-list__title
items.primitive-list__items
empty.primitive-list__empty
4 rows
Modifier
primitive-list--{ordered}
State attribute
data-emptyfrom the isEmpty prop

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
empty
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
List renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-semanticready
terminalterminal-listplanned
nativenative-adapterexperimental
5 rows

Accessibility

Keeps labelled list semantics, supports explicit outer-region naming, and preserves an announced empty state without requiring recipe styling.

  • When a title is present, the list exposes that heading as its accessible name unless an explicit outer region label is intentionally different.
  • Ordered flows retain ol semantics, and empty collections announce fallback copy politely.