← Back to Components

Project Card

Interactive card component for displaying project information with status badges, metadata, and navigation capabilities

Navigation vs Interaction

Navigation Link Card

Active

User Authentication Enhancement

Due on March 17, 2025Created by Leslie Alexander

Navigation: Uses Next.js Link for page navigation. Click to navigate to project details.

Interactive Action Card

Review Needed

Design System Updates

Due on March 20, 2025Created by Design Team

Interaction: Uses onClick for custom actions like opening modals or triggering workflows.

External Link

External

Integration Documentation

Due on April 1, 2025Created by API Team

External Navigation: Links to external resources with proper target and rel attributes.

Basic Project Cards

Non-Interactive Card

In Progress

Design System Documentation

Due on April 20, 2025Created by Sarah Chen

Project card without click handler - no hover effects or arrow

Minimal Information

Urgent

Emergency Bug Fix

Project card with just title and status - optional fields omitted

Status Variants

Different Status Types

Complete

Security Audit Complete

Completed on March 1, 2025Created by Mike Johnson
At Risk

API Migration Project

Due on May 15, 2025Created by Jessica Wong
In Progress

Database Optimization

Due on March 30, 2025Created by David Kim
Overdue

Legacy System Retirement

Overdue since February 28, 2025Created by Emily Rodriguez
Draft

New Feature Planning

Due on June 1, 2025Created by Alex Thompson

Five status variants: success (green), warning (yellow), info (blue), error (red), basic (gray)

Responsive Design

Mobile Layout (S viewport)

Mobile viewport simulation
Active

Mobile App Redesign

Due on April 10, 2025Created by Maria Lopez

Mobile layout with smaller font sizes and stacked details

Desktop Layout (L-M and XXL-XL viewports)

On Track

Enterprise Dashboard Development

Due on May 5, 2025Created by Robert Chang

Desktop layout with larger fonts and horizontal details arrangement

Real-World Examples

Project List

Behind Schedule

Q1 Performance Review Implementation

Due on March 25, 2025Created by HR Team
In Development

Employee Onboarding System Upgrade

Due on April 12, 2025Created by IT Department
Deployed

Security Training Module Deployment

Completed on February 20, 2025Created by Security Team
Critical

Feedback Portal Bug Fixes

Overdue since March 1, 2025Created by Development Team

Project cards in a list layout with consistent spacing and borders

Disabled State

Archived

Archived Legacy Project

Archived on January 15, 2025Created by Former Employee

Disabled project card with reduced opacity and no interactions