ListCard

Three to five label · value rows under a title, separated by hairlines. Values are mono and right-aligned so they line up. More than five rows, or more than two columns, is a Table.

import { ListCard } from "@puckoops/camelot";

This month

Four numbers, one list.

Active projects: 17
Hours logged: 312
Invoices issued: 8
Files added: 23

Name	Description	Default	Control
title*	ReactNode	-	This month
rows*	3–5 rows ListCardRow[]	-	[ { "label": "Active projects", "value": 17 }, { "label": "Hours logged", "value": 312 }, { "label": "Invoices issued", "value": 8 }, { "label": "Files added", "value": 23 } ]
caption	ReactNode	-	Four numbers, one list.
footer	ReactNode	-	-
className	string	-

When to use

Use ListCard for 'this month', 'needs attention', 'due this week' — short lists of numbers. More than five rows is a Table.

Use Table instead for more than five rows or anything with several columns.

Examples

With Footer

A link at the foot leads to the full table.

Due this week

Receivable, by due date.

Invoice 2041 · Nordvik Atelier: £14,200
Invoice 2044 · Brightwater Foods: £9,600
Invoice 2046 · Purslane Studio: £3,150

All receivables

Needs Attention

A value can be a chip when the number is a state; the rest stay ink.

Needs attention

Four numbers, one list.

Overdue invoices: 3
Tasks sent back: 2
Awaiting review: 5

All Variants

Three list cards on a 4 + 4 + 4 row.

This month

Four numbers, one list.

Active projects: 17
Hours logged: 312
Invoices issued: 8
Files added: 23

Due this week

Invoice 2041: £14,200
Invoice 2044: £9,600
Invoice 2046: £3,150

All receivables

Needs attention

Overdue invoices: 3
Tasks sent back: 2
Awaiting review: 5