Payment Card

Beta

Get Ritla UI

A bank card face in Graphite, Light or Brand, and a stack of them; printed left to right in every language.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add payment-card
Also works with shadcn: npx shadcn@latest add @ritla/payment-card
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

payment-card.tsx

import { CardStack, PaymentCard } from "@/components/ui/payment-card";<PaymentCard kind="Debit" last4="8152" holder="Noor Al-Hassan" expiry="08/29" mainLabel="Main card" label="Debit card ending in 8152" />

Examples

Card stack

EnglishMirroredArabic

Get the code

LTR →

API reference

PaymentCard

Prop	Type	Default	Description
`variant`	`"graphite" \| "light" \| "brand"`	`"graphite"`	Figma's Style.
`issuer`	`string`	`"Ritla"`	The issuer's name, top start, and the soft watermark.
`kind`	`ReactNode`	None	The card type, top end (“Debit”).
`last4 / holder / expiry`	`string`	None	The last four digits, the name as printed and MM/YY.
`mainLabel`	`ReactNode`	None	Figma's Main: the “Main card” badge, in the page language.
`label`	`string`	None	What a screen reader hears for the whole card.

CardStack

Prop	Type	Default	Description
`children`	`ReactNode`	None	Payment cards, front card first; up to three are drawn.

Accessibility

ARIA

A card is one image (role="img") named by label (“Debit card ending in 8152”), so the dots and the chip are never read.
In a stack, only the front card is exposed; name it for the whole stack.

Arabic and RTL notes

Mirrors

Nothing on the face: a printed card reads the same in every language.

Does not mirror

The whole face stays left to right (dir="ltr"): issuer at the left, the number and expiry where a real card has them.

Numerals: Card numbers and expiry dates stay in Latin digits: they are identifiers, copied as printed.
Arabic typography: Pass the holder in Latin capitals, as embossed on the card.