Components
Project cards and ordering
Show a project’s identity and next action together, with separate controls for opening, completion, and ordering.
On this page
Purpose and usage
Show a project’s identity and next action together, with separate controls for opening, completion, and ordering.
Use for overview/prioritization. Use an agenda block when the project is being placed in time.
Anatomy
| Part | Contract |
|---|---|
| Space label | Short context above the project title. |
| Project title | Primary identity with open-project overlay link. |
| Next action | TaskCheckbox below a divider. |
| Ordering handle | Numbered handle with drag and keyboard affordance. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Identity | teal, blue, plum, sand, coral. |
| position | Enables ordered-card presentation. |
| dragging | Reduced opacity and changed shadow. |
| Callbacks | Drag handlers and onHandleKeyDown supplied by parent. |
State coverage
| State | Implemented behavior |
|---|---|
| Resting | Project fill, border and paired text roles. |
| Hover | Raised card and stronger shadow. |
| Drag active | 45% opacity. |
| Keyboard ordering | ProjectsWorkspace provides arrow-key handling. |
Interaction and responsive behavior
- Do not place task completion beneath an unbreakable whole-card link. The source separates the overlay and task z layers.
- Keep local project order and persisted order coordinated.
- Next-action text is clamped to two lines in a card; use detail view for full context.
Accessibility contract
- Open link names the project.
- Order handle names the position/project and explains arrow-key reordering.
- Task control remains an independent action.
Known gaps and readiness
Ordering persistence is stubbed for captures. Reordering animation uses JavaScript and needs explicit reduced-motion verification.
Composition example
<ProjectCard color="teal" project="Atlas customer portal"
space="Product" nextAction="Review account settings"
href="/projects/atlas-portal" position={1}
onHandleKeyDown={handleReorder} />Source references
| File | Responsibility |
|---|---|
| app/components/project-card.tsx | Card anatomy and task control |
| app/components/projects-workspace.tsx | Ordering state and keyboard handlers |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1