# WorkPreviewSection

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

- Status: stable
- Group: marketing
- Page: https://www.digitaltableteur.com/design-system/components/work-preview-section
- Contract: https://www.digitaltableteur.com/contracts/v1/WorkPreviewSection.contract.json

## 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

| 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.

| 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.

## Links

- Machine-readable contract (Design System Contract 1.0): https://www.digitaltableteur.com/contracts/v1/WorkPreviewSection.contract.json
- Markdown version of this page: https://www.digitaltableteur.com/design-system/components/work-preview-section.md
- Component index as JSON: https://www.digitaltableteur.com/design-system/components.json
- All components: https://www.digitaltableteur.com/design-system/components
- Source: The implementation lives in a private repository. This page, its Markdown twin and the contract are generated from it at build time and are the public source of truth.