ProcessBlock

Case-study process section that arranges titled phase columns (a heading one level below the section title, h3 by default, and an activity list each, no Card surface) in a grid under a section title and optional description.

Status: stable. Group: structure. Markdown version: /design-system/components/process-block.md

When to use

ProcessBlock presents a project's process as titled phase columns in a grid, under a section title and an optional description. Work case-study pages use it to walk through discovery-to-delivery phases between StoryBlock sections. Phases are data props, so pages keep copy colocated with the page.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

ProcessBlock props
Prop	Type	Default	Description	Required
`phases`	`ProcessPhase[]`	none	Array of process phases to display.	Yes
`sectionTitle`	`string`	none	Section title, rendered at headingLevel (h2 by default) and used as the aria-label fallback. Defaults to the translated "Process" (`processBlock.title`); pass an empty string to render no title.	No
`headingLevel`	`2 \| 3 \| 4 \| 5`	`2`	Heading level of the section title; phase titles sit one level below it.	No
`description`	`React.ReactNode`	none	Optional description or introduction text.	No
`backgroundColor`	`"transparent" \| "light" \| "white"`	`light`	Background color variant; defaults to light.	No
`maxWidth`	`"sm" \| "md" \| "lg" \| "full" \| "xl"`	`lg`	Maximum width constraint; defaults to lg.	No
`spacing`	`"compact" \| "default" \| "comfortable" \| "spacious"`	`comfortable`	Spacing variant; defaults to comfortable.	No
`columns`	`2 \| 3 \| 4`	`4`	Number of columns (2, 3 or 4); defaults to 4.	No
`className`	`string`	`""`	Additional CSS class.	No
`as`	`"article" \| "div" \| "section"`	`section`	Semantic HTML element to use; defaults to section.	No
`ariaLabel`	`string`	none	Accessible label for the section; falls back to sectionTitle.	No

Variants

Allowed headingLevel values: 2, 3, 4, 5 (default 2).
Allowed backgroundColor values: transparent, light, white (default light).
Allowed maxWidth values: sm, md, lg, full, xl (default lg).
Available spacings: compact, default, comfortable, spacious (default comfortable).
Allowed columns values: 2, 3, 4 (default 4).
Allowed as values: article, div, section (default section).

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.

ProcessBlock rules
Level	Rule	How it is checked
MUST	ARIA: The root (a section by default) is named by ariaLabel, falling back to sectionTitle, so the default render is a region landmark; with as="div" the name sits on a generic element and is not announced.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The section title renders at headingLevel (default 2) and each phase title one level below it, so the block can sit under any heading up to h4 without skipping a level.	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

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { ProcessBlock } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/patterns exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.