ServicesSection

Services grid with icons and copy. It was the homepage services band; ServicesLedger replaced it there.

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

When to use

ServicesSection is a services grid: icon-led service cards with title/description copy, configurable columns and card variant, inside a section that carries an id and a donnyTarget. It was the homepage services band; ServicesLedger replaced it there, and it currently has no production consumer. For a case-study scope summary use ServicesBlock instead.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

ServicesSection props
Prop	Type	Default	Description	Required
`title`	`string`	none	Section title.	No
`description`	`string`	none	Section description/lead text.	No
`services`	`ServiceItem[]`	none	Array of services to display.	Yes
`columns`	`2 \| 3 \| 4`	`3`	Number of columns (responsive). Defaults to `3`.	No
`cardVariant`	`"minimal" \| "default" \| "bordered" \| "elevated"`	`default`	Card style variant. Defaults to `default`.	No
`className`	`string`	none	Custom className.	No
`id`	`string`	`services`	Section ID for navigation. Defaults to `services`, and the heading id derives from it (`{id}-title`), so give each instance on a page its own id.	No
`donnyTarget`	`string`	`home.services`	Donny site action target id for this section. Defaults to `home.services`.	No

Variants

Allowed columns values: 2, 3, 4 (default 3).
Allowed cardVariant values: minimal, default, bordered, elevated (default default).

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.

ServicesSection rules
Level	Rule	How it is checked
MUST	ARIA: The root is a section (via Section), labelled by its h2 through aria-labelledby only when title is set.	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. ServicesSection is not exported from @digitaltableteur/react, so there is no public import path.