Skip to main content
Digitaltableteur

Design system components

EngagementPageContent

One engagement offer page: a breadcrumb back to Pricing, problem, fit signals, scope and limits, steps, deliverables, investment, published proof, an offer FAQ, the procurement FAQ, the other engagements and a booking call to action.

Status: beta. Group: marketing. Markdown version: /design-system/components/engagement-page-content.md

When to use

Renders /engagements/<slug>. Copy lives under engagementPages.<id> in the locales; routes, contact links, price keys and proof order in data/engagements.

When not to use

  • Do not show a claim, figure or client outcome that is not published elsewhere on the site.
  • Do not repeat a procurement question in the offer FAQ.

Look-alikes

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

Props

EngagementPageContent props
PropTypeDefaultDescriptionRequired
engagementId"audit" | "uxSprint" | "liftoff" | "aiops" | "partnership" | "workshop" | "designopsPilot" | "agentPilot" | "dsMcp" | "agentWorkforce"noneWhich engagement to render.Yes
classNamestringnoneAdditional class name on the root.No

Variants

  • Allowed engagementId values: audit, uxSprint, liftoff, aiops, partnership, workshop, designopsPilot, agentPilot, dsMcp, agentWorkforce.

Invalid combinations

The contract records no invalid combinations.

Keyboard

EngagementPageContent keyboard behaviour
KeyBehaviour
TabReaches the calls to action, links and FAQ triggers in reading order.
Enter or SpaceToggles an FAQ item.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

EngagementPageContent rules
LevelRuleHow it is checked
MUSTARIA: The article is labelled by its single h1; each section is labelled by its h2.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Steps are an ordered list; decorative numbers and icons are hidden from assistive technology.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Proof links carry the case title in a visually hidden suffix so repeated link text stays distinguishable.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe 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.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-10-30.

Install and import

  • In-repo only. EngagementPageContent is not exported from @digitaltableteur/react, so there is no public import path.

Links