ProjectCard

Basic portfolio project card for the work grid: a clickable thumbnail with title, optional category eyebrow and up to three tags.

Status: stable. Group: content. Markdown version: /design-system/components/project-card.md

When to use

The basic work-grid project card (image, title, tags). EnhancedProjectCard is the richer variant; pick one per surface.

The contract records no forbidden uses.

The contract names no look-alike with a deciding condition.

ProjectCard props
Prop	Type	Default	Description	Required
`title`	`string`	none	Project title.	Yes
`slug`	`string`	none	URL slug for the project detail page; the card links to `/work/{slug}`.	Yes
`thumbnail`	`string`	none	Thumbnail image URL.	Yes
`category`	`string`	none	Project category.	No
`tags`	`string[]`	none	Project tags.	No
`aspectRatio`	`"video" \| "square" \| "portrait" \| "landscape"`	`video`	Image aspect ratio. Defaults to `video`.	No
`titlePosition`	`"overlay" \| "below"`	`overlay`	Title position: over the image (`overlay`) or beneath it (`below`). Defaults to `overlay`.	No
`comingSoon`	`boolean`	`false`	Render as a non-interactive teaser with a "coming soon" badge over the media. Defaults to `false`.	No
`comingSoonLabel`	`string`	Coming soon	Visible badge label for the coming-soon overlay (pass a translated string). Defaults to the untranslated English "Coming soon".	No
`className`	`string`	none	Custom className.	No

Available aspect ratios: video, square, portrait, landscape (default video).
Allowed titlePosition values: overlay, below (default overlay).

The contract records no invalid combinations.

The contract records no keyboard interaction.

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

ProjectCard rules
Level	Rule	How it is checked
MUST	ARIA: Whole card is a single link to /work/{slug}; the thumbnail is decorative (alt="") and the link's accessible name comes from the title text.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The title is always an h3; place the card where an h3 fits the page outline.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: With comingSoon the root is a non-interactive div (no link role); the badge label is plain visible text.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Positional, scale, and opacity motion is suppressed under prefers-reduced-motion.	Manual review, last on 2026-11-04. WCAG 2.2.2, 2.3.3.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not invent parallel primitives inside this folder.	Release review; not machine-checked.
MUST NOT	Maintainers: Do not promote to stable without production consumer evidence.	Release review; not machine-checked.

In-repo only. ProjectCard is not exported from @digitaltableteur/react, so there is no public import path.