Card Detail Blueprint
Static open-card panel over a scrim showing status, assignee, description, a checklist with progress, and comment count.
Static open-card panel over a scrim showing status, assignee, description, a checklist with progress, and comment count.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Card Detail Blueprint is the open-card view rendered as a static centered panel over a scrim. The card shows issue ACM-287, API key rotation UI, with a full meta section (Status: In Review, Assignee: Jordan Lee, Reporter: Priya Nair, Due date: Jun 14 2026, Labels: Feature and API), a plain-English description of the grace-period key rotation flow, a three-item checklist with one item complete and a Progress bar at 33%, and a 4 comments footer.
The checklist and progress derive from a single const array; the panel is plain markup on a scrim div, never a Radix portal, so the preview iframe captures the full open state in every screenshot.
Reach for this block to show users what expanding a card looks like. Wire it by rendering it conditionally over your board when a card row is clicked, passing the selected card as props.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the issue detail overlay for a software board. Other card detail shapes:
Tip: a Progress bar above the checklist gives the assignee a completion read at a glance without counting checkboxes manually.