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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.