Skip to main content
Digitaltableteur

Design system components

LocationCard

Card variant for displaying a single office or service location (address, hours, map link). Visual sibling of Card with the location-specific slot order baked in.

Status: beta. Group: display. Markdown version: /design-system/components/location-card.md

When to use

Contact-page card for a single location: address, open hours, and contact links. Composes OpenHours.

When not to use

  • Do not use as a generic 'card with an icon and label'; that is Card.
  • Do not stack two LocationCards vertically with no spacing; they need rhythm via Grid or Stack.

Look-alikes

  • Card: Do not use as a generic 'card with an icon and label'; that is Card.

Props

LocationCard props
PropTypeDefaultDescriptionRequired
officeNamestringnoneOffice name heading.Yes
addressstring[]noneAddress lines.Yes
emailstringnoneContact email.No
phonestringnoneContact phone.No
variant"default" | "bordered" | "elevated"defaultCard variant.No
classNamestringnoneCustom className.No

Variants

  • Available variants: default, elevated, bordered (default default).

Invalid combinations

The contract records no invalid combinations.

Keyboard

LocationCard keyboard behaviour
KeyBehaviour
TabFocuses the embedded action (map link, contact CTA) in order.

Rules

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

LocationCard rules
LevelRuleHow it is checked
MUSTARIA: Renders an <article> so the whole card is announced as a region.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Address content sits inside a real <address> element so screen readers identify it as contact information.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-05-28.

Install and import

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

Links