WorkPreviewSection

Plain project-card preview section with a title, three layouts and an optional view-all link to /work.

Status: stable. Group: marketing. Markdown version: /design-system/components/work-preview-section.md

When to use

WorkPreviewSection is the plain project-card grid: a titled section of project preview cards with layout options and an optional view-all link (tablet and up). layout="grid" renders every project as ProjectCard; "asymmetric" shows at most three (one large plus two); "featured" shows at most three as EnhancedProjectCard, whose copy is marked with contentLanguage (default "en"). No page renders it today: the homepage uses WorkMagneticField, which only reuses its ProjectItem type. Use it for straightforward work listings on landing or index pages.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

WorkPreviewSection props
Prop	Type	Default	Description	Required
`title`	`string`	none	Section title.	No
`projects`	`ProjectItem[]`	none	Array of projects to display.	Yes
`layout`	`"grid" \| "asymmetric" \| "featured"`	`grid`	Grid layout style. Defaults to "grid", which shows every project; "asymmetric" and "featured" show at most three.	No
`showViewAll`	`boolean`	`true`	Show "View all work" link (hidden below tablet). Defaults to true.	No
`className`	`string`	none	Custom className.	No
`id`	`string`	`work`	Section ID for navigation. Defaults to "work" and also forms the heading id that names the section.	No
`contentLanguage`	`string`	`en`	BCP 47 language of the project titles and tags, set as lang on the featured layout's EnhancedProjectCard copy. Defaults to "en" (project content is English); pass the page language for localized project data.	No

Variants

Available layouts: grid, asymmetric, featured (default grid).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

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

WorkPreviewSection rules
Level	Rule	How it is checked
MUST	ARIA: When title is set, the section is named by its h2 through aria-labelledby (`${id}-title`).	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The view-all chevron nudges on hover only with motion allowed; under prefers-reduced-motion it stays still and has no transition.	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	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

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