Wallet Card

The Wallet Card renders a payment card as a physical object: a gradient surface with a faint printed grain, an inset edge highlight, an EMV chip, a contactless glyph and an optional network mark. It shows the balance, a masked card number and optional holder / expiry details, and fades a soft sheen across the surface on hover. It uses motion-v only for a small spring entrance.

Usage

Drop the card where you want to show a payment method or account balance. Only the last four digits of card-number are ever displayed. Use the shine prop to disable the hover sheen if it competes with other motion.

<template>
  <MWalletCard
    class="max-w-sm"
    label="Everyday"
    balance="$2,450.00"
    card-number="4242424242424242"
    holder="Ava Chen"
    expiry="08/29"
    network="visa"
  >
    <p class="text-xs text-white/70">
      Active • Next payment in 12 days
    </p>
  </MWalletCard>
</template>

Examples

Themed surface and network marks

The surface is a theme slot, so a single ui.card override reskins the whole card. Use network to stamp a payment mark in the corner.

<template>
  <div class="flex w-full flex-wrap items-start justify-center gap-4">
    <MWalletCard
      class="max-w-sm"
      label="Savings"
      balance="$18,204.10"
      card-number="5500005555555559"
      holder="Ava Chen"
      expiry="03/27"
      network="mastercard"
    />
    <MWalletCard
      class="max-w-sm"
      label="Studio"
      balance="$640.00"
      card-number="371449635398431"
      holder="Ava Chen"
      expiry="11/28"
      network="amex"
      :ui="{ card: 'bg-[linear-gradient(145deg,oklch(0.55_0.16_300),oklch(0.3_0.12_295))]' }"
    />
  </div>
</template>

Customize

Props

Events

No events are emitted by this component.

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.walletCard in app.config.ts.

Accessibility

The root is a plain animated container. Every decorative layer — the gradient surface, printed grain, sheen, inset edge, chip, contactless glyph and network mark — is aria-hidden="true". Balance, masked card number, holder and expiry are plain text, and the number only ever exposes its last four digits. No keyboard handlers, roles or ARIA attributes are added by the component, and there is no prefers-reduced-motion handling in source; the entrance spring and sheen run regardless of user preference.

Performance

• Entrance uses motion-v with a spring (stiffness: 260, damping: 28, initial y: 24, opacity: 0) on the root container.
• The card surface is pure CSS: a gradient background (the card slot), a faint printed grain from an inline SVG feTurbulence data-URI on a mix-blend-overlay overlay, an inset ring-white/15 edge, and a resting radial sheen gradient that fades in on hover (opacity toggle with transition-opacity duration-500).
• Chip, contactless and network marks are inline SVG with no image requests. The chip gradient id is derived from useId(), so the SSR and client markup match.
• maskedCardNumber strips whitespace and slices the last four digits only; no heavy formatting loops.
• No requestAnimationFrame, timers, or listeners beyond the hover handlers, and no WebGL.