ServicesBlock

Case-study engagement overview with services, duration, and tools columns alongside overview copy.

Status: stable. Group: marketing. Markdown version: /design-system/components/services-block.md

When to use

ServicesBlock summarizes an engagement at the top of a case study: overview copy plus services / duration / tools columns, each with its own title prop. All content arrives via props so pages keep copy local. Use ServicesSection for the marketing services grid on the homepage; ServicesBlock is the factual project-scope block.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

ServicesBlock props
Prop	Type	Default	Description	Required
`services`	`ServiceItem[]`	`[]`	List of services provided.	No
`duration`	`string`	none	Project duration or timeline.	No
`tools`	`ToolIcon[]`	`[]`	Tools or technologies used: an icon plus a name for each.	No
`overviewTitle`	`string`	none	Overview title. Defaults to the translated "Overview" (`projectOverviewLabel`).	No
`overview`	`React.ReactNode`	none	Overview content (can be string or React node for rich content)	Yes
`servicesTitle`	`string`	none	Title for the services section. Defaults to the translated "Services" (`projectServicesTitle`).	No
`durationTitle`	`string`	none	Title for the duration section. Defaults to the translated "Duration" (`projectDurationLabel`).	No
`toolsTitle`	`string`	none	Title for the tools section. Defaults to the translated "Tools" (`projectToolsLabel`).	No
`maxWidth`	`"sm" \| "md" \| "lg" \| "full" \| "xl"`	`md`	Maximum content width.	No
`spacing`	`"compact" \| "default" \| "comfortable" \| "spacious"`	`comfortable`	Vertical spacing.	No
`className`	`string`	none	Custom CSS class for styling extensions.	No
`as`	`"article" \| "div" \| "section"`	`section`	Semantic HTML element to render as (default section)	No
`ariaLabel`	`string`	none	ARIA label for section.	No

Variants

Allowed maxWidth values: sm, md, lg, full, xl (default md).
Available spacings: compact, default, comfortable, spacious (default comfortable).
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.

ServicesBlock rules
Level	Rule	How it is checked
MUST	ARIA: Renders a section by default (as="section") named by ariaLabel, falling back to overviewTitle.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Tools render as a role=list named by toolsTitle; each tool is a role=listitem div holding its name (tool.ariaLabel) as visually hidden text, with its icon forced to aria-hidden, so every screen reader reads the name as item content.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Default section titles (Overview, Services, Duration, Tools) follow the active language through the shared project keys.	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. ServicesBlock is not exported from @digitaltableteur/react, so there is no public import path.