Components

Cards

White surface cards with a 2px border and an embedded 64×64 icon tile. Default: 2px #E5E8ED. Selected: 3px #2ECE78 + green glow shadow and a floating check badge. Ships on the PaymentMethod screen, where two cards are pinned to a fixed pixel height so they stay aligned side by side.

Payment method

BG
--color-surface
Border default
2px · --color-border
Border selected
3px · --color-primary
Radius
--radius-lg · 12px
Height
260px (pinned for side-by-side alignment)
Icon tile
64×64 · --radius-lg · --color-bg / --color-primary · 12%
Icon glyph
money-bill · credit-card · 28px
Title · Subtitle
28px/700 · 14px/regular
Shadow default
0 2px 8px · black 3%
Glow selected
0 4px 20px · --color-primary · 12%
Check badge
32px circle · --color-primary
Interaction
ARIA radiogroup · click + Arrow keys
Usage
---
import Card from '@/components/kiosk/Card.astro';
import KioskIcon from '@/components/icons/KioskIcon.astro';
---

{/* Default · Selected — height auto (grows with content) */}
<Card variant="default">
  <KioskIcon slot="icon" name="money-bill" size={28} class="text-fg-muted" />
  Cash
  <span slot="subtitle">Insert banknotes</span>
</Card>

<Card variant="selected">
  <KioskIcon slot="icon" name="credit-card" size={28} class="text-primary" />
  Card
  <span slot="subtitle">Tap contactless card</span>
  <KioskIcon slot="check-icon" name="check" size={14} />
</Card>

{/* PaymentMethod case — two cards pinned at 260px so copy of
    different lengths still aligns side by side */}
<Card variant="default" height={260}>
  <KioskIcon slot="icon" name="money-bill" size={28} class="text-fg-muted" />
  Cash
  <span slot="subtitle">Insert banknotes</span>
</Card>

<Card variant="selected" height={260}>
  <KioskIcon slot="icon" name="credit-card" size={28} class="text-primary" />
  Card
  <span slot="subtitle">Tap contactless card</span>
  <KioskIcon slot="check-icon" name="check" size={14} />
</Card>

{/* Consumer pattern — wrap in a <button> for radio-style selection */}
<button type="button" role="radio" aria-checked={selected} onClick={handleSelect}>
  <Card variant={selected ? 'selected' : 'default'} height={260}>
    <KioskIcon slot="icon" name="credit-card" size={28} />
    Card
    <span slot="subtitle">Tap contactless</span>
  </Card>
</button>
Props
  • variant
    Type
    'default' | 'selected'
    Default
    'default'
    Desc
    default → 2px border + soft shadow · selected → 3px primary border + green-glow shadow + check badge.
  • height
    Type
    number | 'auto'
    Default
    'auto'
    Desc
    auto → grows with content · number → pinned pixel height (e.g. 260 for PaymentMethod's aligned pair).
  • class
    Type
    string
    Default
    —
    Desc
    Extra classes appended to the root element.
  • slot: icon slot
    Type
    —
    Default
    —
    Desc
    Icon glyph, consumer-sized (~28px to match the kiosk). Card renders the 64×64 tile wrapper automatically.
  • slot: (default) slot
    Type
    —
    Default
    —
    Desc
    Card title.
  • slot: subtitle slot
    Type
    —
    Default
    —
    Desc
    Secondary copy under the title.
  • slot: check-icon slot
    Type
    —
    Default
    —
    Desc
    Custom check icon for the selected-state badge (defaults to an inline SVG).