Marketing

Task Card

Pronew

A board card for a task with priority, labels, assignees and meta.

In progress2

WEB-412

Checkout fails for saved cards in Safari

The payment sheet closes before 3-D Secure returns. Affects about 4% of orders since Monday.

BugPayments

Today8

WEB-398

Design empty states for the reports page

DesignReports

Oct 183L

Installation

npx shadcn@latest add @blank-pro/task-card

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  TaskCard,
  TaskCardContent,
  TaskCardFooter,
  TaskCardHeader,
  TaskCardId,
  TaskCardMeta,
  TaskCardPriority,
  TaskCardTags,
  TaskCardTitle,
} from "@/components/ui/task-card"

<TaskCard>
  <TaskCardHeader>
    <TaskCardPriority level="high" />
    <TaskCardId>WEB-412</TaskCardId>
  </TaskCardHeader>
  <TaskCardContent>
    <TaskCardTitle>Checkout fails for saved cards</TaskCardTitle>
  </TaskCardContent>
  <TaskCardTags>
    <Badge variant="destructive">Bug</Badge>
  </TaskCardTags>
</TaskCard>

Labels are plain Badges and people are Avatars, so a board picks up any change you make to either.

Examples

Priority and state

The card carries no drag logic. Set data-dragging="true" from your drag-and-drop library while a card moves and it lifts off the column; set data-state="done" and its title is struck through.

OPS-20No priority

OPS-21low

OPS-22medium

OPS-23high

OPS-24urgent

OPS-31

Rotate the staging database credentials

OPS-27