# PaymentCard

> A payment card drawn in CSS, solid or frosted glass, for pricing, billing and feature sections.

URL: https://apogee.avaui.dev/docs/payment-card
Last updated: 2026-10-16

A payment card drawn in CSS, solid or frosted glass, for pricing, billing and feature sections.

Last updated October 16, 2026

```astro
<PaymentCard class="w-80" />
```

## Add

```sh
npx @ava-ui/apogee add payment-card
```

Uses `@lucide/astro` (`Nfc`). Zero JS.

## Usage

```astro
---
import PaymentCard from '@/components/apogee/PaymentCard/PaymentCard.astro'
---
<PaymentCard name="Larkspur" holder="Grace Hopper" last4="1234" expiry="09/29" class="w-72" />
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'solid' \| 'glass'` | `'solid'` | A filled card, or a frosted pane over what sits behind it. |
| `color` | `'primary' \| 'neutral'` | `'primary'` | Fill of a solid card: the brand colour or the inverted surface. |
| `name` | `string` | `'Example'` | The name on the card. |
| `holder` | `string` | `'Ada Lovelace'` | Card holder. |
| `last4` | `string` | `'4242'` | The last four digits. |
| `expiry` | `string` | `'06/28'` | MM/YY. |
| `label` | `string` | “Payment card ending in {last4}” | The image’s name. |
| `class` | `string` | — | Give it a width (`w-64`); it fills its container otherwise, and the type scales with it. |

## Variants

Every `variant` and `color`, the glass card over a photo:

```astro
<PaymentCard color="primary" />
<PaymentCard color="neutral" />
<PaymentCard variant="glass" />
```

## States

-   **Static** — an illustration with no interactive states; it never takes focus.

## Examples

Card stacks in feature sections: [Features sections](https://apogee.avaui.dev/docs/features-sections).

## Accessibility

-   The card is one image (`role="img"`), named “Payment card ending in {last4}”; its text is not read piece by piece.
-   Use it as an illustration; never as the place someone reads their real card details.

## Tokens

| Token | Used for |
| --- | --- |
| `--background-primary` / `--on-primary` | Primary solid card |
| `--background-inverted` / `--on-inverted` | Neutral solid card |
| `--background-page` / `--border-neutral` | Glass card pane and edge |
| `--shadow-raised` | Lift |

## Do / Don’t

-   **Do** use made-up names and `4242`\-style digits.
-   **Don’t** add a real card network’s mark.

## Content

-   Holder in capitals is styling; write the name normally.

## Related

[

DeviceFrameA screenshot in a phone, a landscape tablet or a browser window, drawn in CSS with the theme's colours; it scales as a whole and a dark screenshot swaps in with the theme.

](https://apogee.avaui.dev/docs/device-frame)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)