WorkMagneticField

Homepage work grid with magnetic hover on up to three project cards.

Status: stable. Group: marketing. Markdown version: /design-system/components/work-magnetic-field.md

When to use

WorkMagneticField is the homepage work showcase: a grid of project cards with the magnetic hover interaction, a view-all link (showViewAll, default true) and homepage anchor wiring (id defaults to "work", donnyTarget to "home.work"). It renders its own grid of EnhancedProjectCard, at most the first three projects, and tags every card with contentLanguage="en" whatever the page locale; it shares only the ProjectItem type with WorkPreviewSection. Use WorkPreviewSection when you need the plain grid without the effect.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

WorkMagneticField props
Prop	Type	Default	Description	Required
`title`	`string`	none	Section title.	No
`projects`	`ProjectItem[]`	none	Projects to display. Only the first three render; passing more logs a development warning.	Yes
`showViewAll`	`boolean`	`true`	Show "View all work" link (default true)	No
`className`	`string`	none	Custom className.	No
`id`	`string`	`work`	Section ID for navigation (default "work"); also prefixes the title id.	No
`donnyTarget`	`string`	`home.work`	Donny site action target id (default "home.work")	No
`contentLanguage`	`string`	`en`	BCP 47 language of the project titles and metadata, set as `lang` on each card. Project copy is authored in English.	No

Variants

No variant dimensions and no props with a fixed set of values.

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.

WorkMagneticField rules
Level	Rule	How it is checked
MUST	ARIA: Renders a section labelled by its h2 title through aria-labelledby when title is set; without title the section has no accessible name.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The card grid is a role=list of role=listitem wrappers, one per rendered project (at most three).	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Each card marks its project copy with lang from contentLanguage (default "en", because project copy is authored in English) while the surrounding UI follows the page language.	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. WorkMagneticField is not exported from @digitaltableteur/react, so there is no public import path.