Credit Card

Display-only card visual (saved payment method, checkout preview). Shows the last 4 only; flips to the back for CVC hints.

Import

import { CreditCard } from '@marbleui/ui'

Props

<CreditCard>

Prop	Type	Default
expiry *required	`string`	`—`
last4 *required	`string`	`—`
name *required	`string`	`—`
brand	`'visa' \| 'mastercard' \| 'amex'`	`'visa'`
className	`string`	`—`
flipped	`boolean`	`—`
variant	`'midnight' \| 'aurora' \| 'graphite'`	`'midnight'`

Usage notes

Display-only card visual for saved payment methods and checkout summaries. It takes no input; a card-number field can use MaskInput with mask="card".

<CreditCard brand="mastercard" variant="graphite" last4="5100" name="Ada Park" expiry="11/27" />
<CreditCard last4="4242" name="Maya Chen" expiry="08/29" flipped={cvcFocused} />

Pass only last4, never a full number; the front always shows “•••• •••• •••• {last4}”.
brand is visa (default), mastercard or amex; variant is midnight (default), aurora or graphite.
flipped turns the card to the back with a masked CVC hint, so drive it from the CVC field’s focus. With reduced motion the flip is instant. For amex the back hints at the 4-digit code on the front; other brands get the 3-digit code on the back.
Screen readers get one image label, such as “visa card ending in 4242, Maya Chen, expires 08/29”. Flipping isn’t announced.

Example source · show

import { useState } from 'react'
import { TextField } from '../text-field'
import { CreditCard } from './credit-card'

function Flip() {
  const [back, setBack] = useState(false)
  return <div className="flex items-center gap-6"><CreditCard last4="4242" name="Maya Chen" expiry="08/29" flipped={back} /><TextField label="CVC" className="w-24" onFocus={() => setBack(true)} onBlur={() => setBack(false)} description="Flips the card" /></div>
}
export const styles = {
  Variants: () => <div className="flex flex-wrap justify-center gap-4"><CreditCard last4="4242" name="Maya Chen" expiry="08/29" /><CreditCard brand="mastercard" variant="aurora" last4="5100" name="Ada Park" expiry="11/27" /><CreditCard brand="amex" variant="graphite" last4="0005" name="Charles Webb" expiry="02/28" /></div>,
  'Flip for CVC': Flip,
}

Source: packages/ui/src/credit-card/credit-card.tsx

Catalog