Skip to main content
Digitaltableteur

Design system components

CaseStudySummary

Decision-first case study summary: outcome, role, constraints, key decisions and evidence with source labels.

Status: alpha. Group: content. Markdown version: /design-system/components/case-study-summary.md

When to use

Opens a work case study before the process narrative, answering what changed, who did what, what made it hard, which decisions shaped it and where each claim comes from.

When not to use

  • Do not present a claim without a source label.
  • Do not invent metrics that are not on record.

Look-alikes

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

Props

CaseStudySummary props
PropTypeDefaultDescriptionRequired
outcomestringnoneWhat changed because of the work, in one or two sentences.Yes
rolestringnoneRole and scope of the engagement.Yes
constraintsstring[]noneWhat made the problem hard.Yes
decisionsCaseStudyDecision[]noneThe decisions that shaped the result.Yes
evidenceCaseStudyEvidence[]noneClaims with an explicit source label; nothing is presented unsourced.Yes
titlestringnoneSection heading. Defaults to the translated "At a glance".No
maxWidth"sm" | "md" | "lg" | "full" | "xl"lgMaximum content width.No
classNamestringnoneAdditional class name applied to the section root.No

Variants

  • Allowed maxWidth values: sm, md, lg, full, xl (default lg).

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.

CaseStudySummary rules
LevelRuleHow it is checked
MUSTARIA: Section is labelled by its h2 via aria-labelledby.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Key decisions render as an ordered list.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.
MUSTA human completed an end-to-end accessibility review of this component.Not yet verified: no evidence record.

Install and import

  • In-repo only. CaseStudySummary is not exported from @digitaltableteur/react, so there is no public import path.
  • Alpha components are internal and never exported.

Links