Skip to main content
Digitaltableteur

Design system components

ValuesSection

Studio values section for about page.

Status: alpha. Group: marketing. Markdown version: /design-system/components/values-section.md

When to use

Studio values section for about page.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

ValuesSection props
PropTypeDefaultDescriptionRequired
titlestringnoneSection title.Yes
subtitlestringnoneOptional subtitle/intro text.No
valuesValueItem[]noneArray of values to display.Yes
cardVariant"default" | "bordered" | "elevated" | "terminal"borderedCard variant. terminal renders each value as a TerminalCard: title and meta in the header band, description below.No
background"default" | "muted" | "accent"defaultBackground variant.No
columns"two" | "three"threeResponsive grid column preset.No
backgroundImagestringnoneFull-bleed image behind the section (a public URL). The heading and intro sit on plates in the primary colour with inverted text.No
classNamestringnoneCustom className.No

Variants

  • Allowed columns values: two, three (default three).
  • Allowed cardVariant values: default, bordered, elevated, terminal (default bordered).
  • Available backgrounds: default, muted, accent (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.

ValuesSection rules
LevelRuleHow it is checked
MUSTRequired stories produce no axe violations at the configured severity.Not yet verified: no evidence record. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Not yet verified: no evidence record. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Not yet verified: no evidence record.
MUST NOTMaintainers: Do not invent parallel primitives inside this folder.Release review; not machine-checked.
MUST NOTMaintainers: Do not promote to stable without production consumer evidence.Release review; not machine-checked.

Install and import

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

Links