Skip to main content
Digitaltableteur

Design system components

ServiceCard

Service tile with icon, title, description, and optional link.

Status: stable. Group: marketing. Markdown version: /design-system/components/service-card.md

When to use

Tile for one service offering; icon, title, short description, optional link. Renders inside the ServicesSection pattern's grid.

When not to use

  • Do not use for a value or principle rather than a service offering; that is ValueCard. A service tile without href is supported.
  • Do not place outside the ServicesSection grid; the tile is sized and gapped by that section.

Look-alikes

  • ValueCard: Do not use for a value or principle rather than a service offering; that is ValueCard. A service tile without href is supported.

Props

ServiceCard props
PropTypeDefaultDescriptionRequired
iconReactNodenoneIcon element displayed at the top.No
titlestringnoneCard title.Yes
descriptionstringnoneCard description.Yes
hrefstringnoneOptional link URL.No
variant"minimal" | "default" | "bordered" | "elevated"defaultCard style variant.No
iconPosition"left" | "top"topIcon position.No
classNamestringnoneCustom className.No
donnyTargetstringnoneDonny site action target id when this card is a spotlight anchor.No

Variants

  • Available variants: default, elevated, minimal, bordered (default default).
  • Allowed iconPosition values: left, top (default top).

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.

ServiceCard rules
LevelRuleHow it is checked
MUSTARIA: With href the whole card is one link (Tab, Enter) whose accessible name is the title plus the description; without href it is a plain div with no interactive role.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: The title is a fixed h3; there is no heading-level prop.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

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

Links