TaskCard
A task from any connected tracker, as in the task list of the Agent. Pick it for lists where one task opens next to the list, and put the start button in actions.
- TaskCard
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, TaskCard
- STSK-101To doUrgent
Skribly TrackerWeb app2 hours ago
- STSK-102In progressHigh
Skribly TrackerWeb appyesterday
- STSK-103In reviewMedium
Skribly TrackerWeb app2 days ago
- STSK-104DoneLow
Skribly TrackerWeb applast week
- GHorg/site#58ClosedRead-only task from an archived repository
GitHubarchived
Dark theme, TaskCard
- STSK-101To doUrgent
Skribly TrackerWeb app2 hours ago
- STSK-102In progressHigh
Skribly TrackerWeb appyesterday
- STSK-103In reviewMedium
Skribly TrackerWeb app2 days ago
- STSK-104DoneLow
Skribly TrackerWeb applast week
- GHorg/site#58ClosedRead-only task from an archived repository
GitHubarchived
High contrast theme, TaskCard
- STSK-101To doUrgent
Skribly TrackerWeb app2 hours ago
- STSK-102In progressHigh
Skribly TrackerWeb appyesterday
- STSK-103In reviewMedium
Skribly TrackerWeb app2 days ago
- STSK-104DoneLow
Skribly TrackerWeb applast week
- GHorg/site#58ClosedRead-only task from an archived repository
GitHubarchived
UsageLink to the section Usage
import { TaskCard } from '@skribly/ui/tracker'<TaskCard taskKey="SK-102" title={task.title} status={<Badge>{task.status}</Badge>}
meta={[tracker.name, project.name, ago(task.updated)]} onPress={() => open(task)} isCurrent={open === task.key} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The title is the card’s button or link and its hit area covers the card; actions sit above it and stay separately reachable. isCurrent sets aria-current with an accent rule. isPending sets aria-busy and shows a spinner with pendingLabel, and the card cannot be opened twice.
- Long titles stop at two lines with the full title in the tooltip and for screen readers.
This demo runs through axe in all three themes on every test run. See what the tests check.