List row
Icon + title/sub + optional status pill, the atomic row of a list or table-like feed.
Preview
Rest
NKNordküste — window clean09:30 · A. BergerOn site
<div class="nx-row"><span class="nx-row__icon">NK</span><span class="nx-row__main"><span class="nx-row__title">Nordküste — window clean</span><span class="nx-row__sub" style="display:block">09:30 · A. Berger</span></span><span class="nx-pill">On site</span></div><NxListRow icon="NK" title="Nordküste — window clean" sub="09:30 · A. Berger" pill="On site" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
icon | ReactNode | — | Required | 30×30 leading icon/initials. |
title | ReactNode | — | Required | Row title, single-line ellipsis. |
sub | ReactNode | undefined | Supporting subtext. | |
pill | ReactNode | undefined | Optional trailing NxStatusPill. |
Classes
| Class | Description |
|---|---|
.nx-row | Base row, hairline bottom divider |
.nx-row__icon | 30×30 identity tile (off-grid, density-invariant) |
.nx-row__title | Ellipsis title |
.nx-row__sub | Muted subtext |
.nx-row--selected | Accent leading-edge marker, RTL-mirrored |
.nx-row--disabled | Dimmed, pointer-events:none |
States
selected
ATAusgewähltKantenmarker (RTL-sicher)
disabled
BHDeaktiviertnicht interaktiv
Accessibility
- Disabled rows carry aria-disabled="true" (they're not a native control, so :disabled doesn't apply) plus pointer-events:none.
- Selected uses an inset box-shadow leading-edge marker, not colour alone — pair with aria-selected on the interactive wrapper when the row is a selectable item.
Do / Don’t
- Do: Give the icon a real two-letter initial or glyph, never leave it blank.Don’t: Don't rely on the accent-50 selected background alone in a list where hover uses the same tint — the marker is what disambiguates.