1 viewer
Back to Components
Component · Layout

ListItem

List child with optional icon, title, subtitle, and body.

Category
Layout
Slots
6
States
0
Writer
Shared
cre8.primitive.list-item

Preview

Live renderShared SSR + WASM writers
  • c8-node-alpha127.0.0.1:8787 · Protocol v1.0Online
    • <ListItem
  icon="server"
  subtitle="127.0.0.1:8787 · Protocol v1.0"
  title="c8-node-alpha"
>
  <Badge intent="success" label="Online" />
</ListItem>

    Anatomy

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

    SlotDOM class
    root.primitive-listitem
    icon.primitive-listitem__icon
    content.primitive-listitem__content
    title.primitive-listitem__title
    subtitle.primitive-listitem__subtitle
    body.primitive-listitem__body
    6 rows
    State attribute
    data-iconfrom the icon prop

    States and platforms

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

    States
    No published states
    Platforms
    webnativeruntime-node
    Recipes
    unstyledruntime-console

    Renderers

    Shared writer
    ListItem 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

    Renders as a native list item while preserving optional icon-only runtime markers through explicit labelling.

    • List items stay inside parent list semantics instead of replacing them with button-like affordances.
    • Icon-only rows provide an accessible name through aria-label or surrounding labelled content.