ki-list-item

A non-interactive item inside ki-list, composed from leading media (start), primary text (default slot), optional secondary text (secondary) and trailing media or meta (end). Use it only as a child of ki-list.

📄 Quarterly report Updated 2 days ago 1.2 MB

<ki-list>
<ki-list-item>
  <span slot="start" aria-hidden="true">📄</span>
  Quarterly report
  <span slot="secondary">Updated 2 days ago</span>
  <span slot="end">1.2 MB</span>
</ki-list-item>
</ki-list>

API reference

When to use: only as a child of ki-list, for one read-only entry in a similar vertical collection.

When not to use: outside ki-list, as a menu item, selectable option, tabular row, navigation link or whole-item clickable control.

Slots

Slot	Description
(default)	Primary text line.
end	Trailing media, meta text or a slotted control.
secondary	Supporting text below the primary line. Its presence selects the multi-line min-height token.
start	Leading media such as an icon, avatar or image.

CSS parts

Part	Description
content	Text column containing primary and secondary lines.
end	Trailing region wrapper.
item	Item row surface and layout container.
start	Leading region wrapper.

CSS custom properties

The public styling contract of ki-list-item: reassign these tokens at :root or on a subtree — never override internals.

Token	Description
--ki-inverse-white-alpha-3	semantic color for inverse white alpha 3.
--ki-inverse-white-alpha-6	semantic color for inverse white alpha 6.
--ki-list-item-gap	dimension used by the list component for item gap (MarsUI md/lg rows: Space/xl 12px between start/content/end regions).
--ki-list-item-min-height	dimension used by the list component for item min height (MarsUI md text-only row is ~40px content-sized: 20px line + 2x10 padding).
--ki-list-item-min-height-multiline	dimension used by the list component for multiline item min height (MarsUI md two-line row measures 56px).
--ki-list-item-padding-block	dimension used by the list component for item padding block (MarsUI md rows: Space/lg 10px).
--ki-list-item-padding-inline	dimension used by the list component for item padding inline.
--ki-list-item-primary-fg	color used by the list component for item primary foreground.
--ki-list-item-primary-font-size	dimension used by the list component for item primary font size.
--ki-list-item-primary-font-weight	font weight used by the list component for item primary font weight.
--ki-list-item-primary-line-height	dimension used by the list component for primary line height (MarsUI primary is UI/Para/medium 13/20, not UI/Body 1 13/24).
--ki-list-item-radius	dimension used by the list component for item radius.
--ki-list-item-secondary-fg	color used by the list component for item secondary foreground.
--ki-list-item-secondary-font-size	dimension used by the list component for secondary font size (MarsUI description line is UI/Caption 2: 12px).
--ki-list-item-secondary-font-weight	font weight used by the list component for item secondary font weight.
--ki-list-item-secondary-line-height	dimension used by the list component for secondary line height (MarsUI caption_2 16px; same value as before with the correct provenance).
--ki-motion-duration-fast	Fast interaction transition duration.
--ki-motion-easing-out	Decelerating interaction transition easing curve.
--ki-typography-family-body	semantic font family for typography family body.

Accessibility

The default slot is the primary text of the entry. Decorative slotted icons carry aria-hidden="true". The item is never a menu item, option, row or link — those are different patterns; a control slotted in end remains an ordinary focusable control.

Workshop

Documented with its parent: open ki-list in Storybook