Board Column Card

About this block

Board Column Card isolates the In Progress column as a standalone unit: a header with the column name, a count badge showing 4, and a ghost add button, followed by four cards in full detail. Each card shows a label Badge (Feature, Bug, Design, Chore), the issue title, the assignee first name and avatar, a due date row, and a subtask Progress bar with a fraction such as 3 / 5. The one overdue card (ACM-294, Fix pagination on mobile billing table, Jun 11) marks the date in medium weight with an overdue note rather than using a red colour.

Cards are one const array with overdue and subtask fields. Overdue signalled by font weight keeps the column visually consistent while still drawing the eye to the blocked work.

When to use

Reach for this block when building or documenting a custom column component, or when a sidebar panel needs to surface one column worth of active work. Compose it alongside the full board for a focused quick-look view.

A natural flow around it on an Application Pro page:

Before

• Board filters bar

After

• Kanban board
• Card detail blueprint

What you can display

One strong use is the In Progress column as an isolated reusable unit. Other column shapes:

• Review column. Waiting on approval cards with a reviewer avatar instead of an assignee.
• Backlog column. Unassigned cards sorted by priority label with no due dates shown.
• Done column. Completed cards muted and sorted by closed date descending.

Tip: subtask progress on each card shifts the conversation from is it done to how far along; even a 1 / 2 bar is more informative than no bar.