List card

Rows of things, each with an optional status, progress bar or link. Layouts turn it into chips, readings or a grid of headlines.

Variations

9 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.

list · chips to open

list · chips to open, medium size — Medium

list · chips to open, large size — Large

list · chips to open, in chat — In chat

list · chips to open, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · readings

list · readings, medium size — Medium

list · readings, large size — Large

list · readings, in chat — In chat

list · readings, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · sections

list · sections, medium size — Medium

list · sections, large size — Large

list · sections, in chat — In chat

list · sections, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · long summary

list · long summary, medium size — Medium

list · long summary, large size — Large

list · long summary, in chat — In chat

list · long summary, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · dots

list · dots, medium size — Medium

list · dots, large size — Large

list · dots, in chat — In chat

list · dots, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list

list, medium size — Medium

list, large size — Large

list, in chat — In chat

list, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · empty

list · empty, medium size — Medium

list · empty, large size — Large

list · empty, in chat — In chat

list · empty, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · links

list · links, medium size — Medium

list · links, large size — Large

list · links, in chat — In chat

list · links, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

list · details

list · details, medium size — Medium

list · details, large size — Large

list · details, in chat — In chat

list · details, light theme — Light theme

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

Fields

Every card also takes the fields all cards share.

Field	Type	What it does
`type`	`'list'`
`items`	`ListItem[]`
`empty?`	`string`
`limit?`	`number`
`log?`	`boolean`
`layout?`	`'temps' \| 'chips' \| 'headlines'`

headlines: a grid of stories, each anchored by its site’s favicon · temps: a reading per row (pct along the track, meta the number) · chips: pills, an icon by name · limit: chips show this many, “19 in all” opens the rest in place

ListItem

Field	Type	What it does
`id?`	`string`	what makes it this row when its words change
`title`	`string`
`href?`	`string`	the row opens this (a new tab)
`dot?`	`Tone`	a status dot on the right, instead of a word
`detail?`	`string`	a couple of lines under the title, e.g. a summary
`subtitle?`	`string`
`meta?`	`string`	right-aligned, e.g. “8 min left”
`pct?`	`number`	0..1 progress bar
`tone?`	`Tone`
`image?`	`string`
`badge?`	`string`	a small mark on a chip: “Major”, “Read first”
`band?`	`[number, number]`	temps: the normal stretch of the track, 0..1 at each end
`section?`	`string`	rows: a quiet heading wherever this changes, e.g. “Today” above “Earlier”

Used by

Calendar · Docker · Glances · Hacker News · Karakeep · Lobsters · Ollama · Reddit · Releases · GitHub repositories · Feeds · Scrutiny · Plex (Tautulli) · Twitch