List

Data list with plain, bullet, number, or image variants. Actions appear on hover. Inset dividers.

data-display v0.1.0

Playground

Plain

<cg-list style="max-width:400px;"></cg-list>

Contained

<cg-list contained style="max-width:400px;"></cg-list>

Clickable + dividers

<cg-list clickable dividers style="max-width:400px;"></cg-list>

Numbered

<cg-list variant="number" style="max-width:400px;"></cg-list>

Empty state

<cg-list style="max-width:400px;"></cg-list>

import { CgList } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-list';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`items`	ListItem[]	—	Items — {title, subtitle?, image?, meta?, actionLabel?}
`variant`	"plain" \| "bullet" \| "number" \| "image"	"plain"	Leading indicator style
`dividers`	boolean	false	Show inset dividers between items
`hoverable`	boolean	true	Hover highlight on items
`clickable`	boolean	false	Items are clickable with chevron
`contained`	boolean	false	Wrap in a card container with border

Event	Detail	Description
`cg-list-click`	{item, index}	When a clickable item is clicked
`cg-list-action`	{item, index, action}	When an action button is clicked