Planning

TaskCard

A card for one piece of work, in three kinds.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`id`	`string`	Unique within a board.
`title`Required	`React.ReactNode`
`roundCheck`	`boolean`	todo: personal task with a checkbox. deliverable: a dated project step. project: a whole project, no check. Use the round check instead of Spectrum's square box.
`kind`	`'todo' \| 'deliverable' \| 'project'`
`done`	`boolean`
`defaultDone`	`boolean`
`onToggle`	`(done: boolean) => void`
`brand`	`string`
`brandTone`	`AvatarProps['tone']`
`brandLogo`	`string`	Projects: the brand's logo, shown in the tile in place of initials.
`meta`	`string`	Time, amount or format, joined after the brand with a middle dot.
`status`	`TaskStatus \| { variant: Semantic; label: string }`	The card's status, shown as a StatusLight: a TaskStatus key or { variant, label }. A checked card shows Done.
`marks`	`boolean`	Shaped status marks instead of dots, as on the calendar.
`late`	`string`	A short factual note such as "2 days late".
`formats`	`string[]`	Projects: content types (e.g. ['Long form', 'Short form']) and revenue (e.g. "$3,500"), shown beside the brand.
`amount`	`string`
`due`	`string`	Projects outside a status board: due date text and a Badge status.
`badge`	`Status`
`compact`	`boolean`	Narrow layout for day columns: title full width, then the check with the status, then the detail line.
`href`	`string`
`className`	`string`

Guidelines

A card for one piece of work, in three kinds. A to-do is a quick task with Spectrum's checkbox and a status light; it is what the MonthCalendar's day list shows. A deliverable is a dated step of a brand project: a check, a status light and the brand. A project is a whole project on the status board: brand, title, content type and revenue, with no check. A checked card shows the Done status.

Provide: title, kind (todo, deliverable, project), done (or defaultDone) and onToggle for checkable kinds, brand and brandTone, meta (time, date, amount or format), status (a key from MonthCalendar.statuses or { variant, label }), marks (shaped status marks instead of dots, as on the calendar), late (a short factual note like "2 days late"), and for projects formats (content types, such as ['Long form', 'Short form']) and amount (the revenue, "$3,500"); due and badge remain for places without a status column. href turns the title into a link. compact gives the narrow layout for tight columns.

Keep titles to a few words starting with a verb for to-dos ("Send", "Pack", "Back up").
late states the fact without blame. Never "You missed".

In narrow board columns (under 180px wide, eight stages across) a project card stacks one thing per line: the brand (up to two lines), the title, the fee, then the formats. Nothing is cut off; the card grows taller instead.
A project card with href opens as a whole (Makado opens the project's drawer from anywhere on the card), so its title doesn't underline like a separate link; the card lifts on hover instead.