<kern-list-item>
One row of kern-list: optional icon or status at the start, heading and description, meta text (e.g. a time) and actions at the end. With href the row is a link, with clickable a button (kernItemClick); actions in the end slot sit beside it, so clicking them never triggers the row.
Examples
See the examples on kern-list.
Properties
clickableboolean
Turns the row into a button that emits kernItemClick.
currentboolean
Marks the link to the open page (aria-current="page"), e.g. in a variant="nav" list.
descriptionstring | undefined
disabledboolean
headingstring | undefined
hrefstring | undefined
Turns the row into a link.
metastring | undefined
Right-aligned, muted (time, count, size).
selectedboolean
Marks the selected row (aria-current="true").
targetstring | undefined
Events
kernItemClickCustomEvent<void>
Click or Enter/Space on a clickable row.
kernNavigateCustomEvent<KernNavigateDetail>
With href: plain left click (no modifier keys, target) before the browser navigates. preventDefault() stops the navigation, so a SPA router can take over.
Slots
(default)Heading (instead of heading)
descriptionSecond line (instead of description)
endActions, e.g. kern-button size="sm" variant="ghost"
metaRight-aligned meta, e.g. kern-date relative (instead of meta)
startIcon, kern-status or avatar
CSS parts
rowThe link, button or plain row