Componentes

Cards

Cards de superfície branca com borda de 2px e um tile de ícone 64×64 embutido. Default: 2px #E5E8ED. Selected: 3px #2ECE78 + sombra com glow verde e um badge de check flutuante. Presente na tela PaymentMethod, onde dois cards ficam fixados a uma altura em pixels fixa para permanecerem alinhados lado a lado.

Forma de pagamento

Experimente · clique ou setas do teclado para alternar a seleção

BG: --color-surface
Borda default: 2px · --color-border
Borda selected: 3px · --color-primary
Radius: --radius-lg · 12px
Altura: 260px (fixada para alinhamento lado a lado)
Tile de ícone: 64×64 · --radius-lg · --color-bg / --color-primary · 12%
Glifo do ícone: money-bill · credit-card · 28px
Título · Subtítulo: 28px/700 · 14px/regular
Sombra default: 0 2px 8px · black 3%
Glow selected: 0 4px 20px · --color-primary · 12%
Badge de check: círculo de 32px · --color-primary
Interação: ARIA radiogroup · clique + setas do teclado

Uso

---
import Card from '@/components/kiosk/Card.astro';
import KioskIcon from '@/components/icons/KioskIcon.astro';
---

{/* Default · Selected — height auto (cresce com o conteúdo) */}
<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>

{/* Caso PaymentMethod — dois cards fixados em 260px para que textos
    de tamanhos diferentes continuem alinhados lado a lado */}
<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>

{/* Padrão do consumidor — envolva num <button> para seleção estilo radio */}
<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

Prop	Tipo	Padrão	Descrição
`variant`	`'default' \| 'selected'`	`'default'`	default → borda 2px + sombra suave · selected → borda primary 3px + sombra green-glow + badge de check.
`height`	`number \| 'auto'`	`'auto'`	auto → cresce com o conteúdo · number → altura fixa em pixels (ex.: 260 para o par alinhado do PaymentMethod).
`class`	`string`	`—`	Classes extras anexadas ao elemento raiz.
`slot: icon` slot	`—`	`—`	Glifo do ícone, dimensionado pelo consumidor (~28px para casar com o kiosk). O Card renderiza o tile de 64×64 automaticamente.
`slot: (default)` slot	`—`	`—`	Título do card.
`slot: subtitle` slot	`—`	`—`	Texto secundário sob o título.
`slot: check-icon` slot	`—`	`—`	Ícone de check customizado para o badge do estado selected (padrão: SVG inline).

variant

Tipo

'default' | 'selected'

Padrão

'default'

Desc

default → borda 2px + sombra suave · selected → borda primary 3px + sombra green-glow + badge de check.
height

Tipo

number | 'auto'

Padrão

'auto'

Desc

auto → cresce com o conteúdo · number → altura fixa em pixels (ex.: 260 para o par alinhado do PaymentMethod).
class

Tipo

string

Padrão

—

Desc

Classes extras anexadas ao elemento raiz.
slot: icon slot

Tipo

—

Padrão

—

Desc

Glifo do ícone, dimensionado pelo consumidor (~28px para casar com o kiosk). O Card renderiza o tile de 64×64 automaticamente.
slot: (default) slot

Tipo

—

Padrão

—

Desc

Título do card.
slot: subtitle slot

Tipo

—

Padrão

—

Desc

Texto secundário sob o título.
slot: check-icon slot

Tipo

—

Padrão

—

Desc

Ícone de check customizado para o badge do estado selected (padrão: SVG inline).