Skip to main content
Digitaltableteur

Design system components

ValueCard

Card variant for values / principles grids; icon + title + short description, with the same three visual treatments as LocationCard.

Status: stable. Group: display. Markdown version: /design-system/components/value-card.md

When to use

Card for one value or principle (icon, title, one-liner) in about/culture grids.

When not to use

  • Do not use for content with a primary CTA; that is ServiceCard or Card.
  • Do not mix ValueCard with Card in the same grid row; the rhythm desyncs.

Look-alikes

  • Card: Do not use for content with a primary CTA; that is ServiceCard or Card.
  • ServiceCard: Do not use for content with a primary CTA; that is ServiceCard or Card.

Props

ValueCard props
PropTypeDefaultDescriptionRequired
iconReactNodenoneDecorative icon element. Its wrapper is aria-hidden, so the title carries the announcement.Yes
titlestringnoneCard title.Yes
descriptionstringnoneCard description.Yes
iconClassNamestringnoneOptional className for the icon wrapper.No
variant"default" | "bordered" | "elevated"defaultCard variant.No
hrefstringnoneDestination. The title becomes a link whose hit area covers the whole card, with the card's hover and focus ring. Without it the card is static and has no hover, so it never looks clickable.No
classNamestringnoneCustom className.No

Variants

  • Available variants: default, elevated, bordered (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.

ValueCard rules
LevelRuleHow it is checked
MUSTARIA: Renders an <article> (role=article, a document-structure role, not a region landmark) with the title as an h3.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: ValueCard wraps the icon slot in an aria-hidden container, so even a labelled Icon or a text glyph passed by a caller is not announced; the title carries the announcement.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.Manual review, last on 2026-11-04.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { ValueCard } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/content exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.
  • Also available as the custom element <dt-value-card>; see the custom elements manifest.

Links