# Flip Card

> A 3D flip credit card. The front shows an embossed number, an EMV chip, a contactless glyph and duo-tone network marks; clicking or pressing Enter rotates it on the Y axis to reveal the magnetic stripe, an Allura signature panel and the CCV.

- Category: Payment
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Inkpage
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: flip, 3d
- Page: https://builder.atheros.ai/components/flip-card
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_flip_card/preview-51da3d76ea94.webp

## Features

- 3D Y-axis flip on a real `<button>` triggered by click and by keyboard (Enter or Space)
- `aria-pressed` reflects the flipped state and the `aria-label` updates to describe the next action
- Pointer-only hover preview — the card lifts and tilts; click, Enter or Space do the flipping
- Mid-flip lift and a settle — the card scales and rises through the turn before landing
- Embossed card number and holder text via layered ink-polarity text-shadows
- Gold EMV chip and a contactless glyph injected from a brand-mark registry
- Duo-tone network discs plus a JetBrains Mono card number, expiry and security code
- Reverse face with a black magnetic stripe, an Allura cursive signature and the CCV block
- Fully respects `prefers-reduced-motion` — the flip still works but resolves instantly

## Accessibility

- **Flip control** — The whole card is a native `<button>` — click, Enter and Space all flip it
- **State exposure** — `aria-pressed` tracks the flipped state
- **Action label** — `aria-label` updates to describe which face the next activation reveals
- **Decorative art** — Logo, chip, contactless glyph and duo-tone network marks are `aria-hidden`
- **Focus indicators** — `:focus-visible` with the `--ring` outline on the flip button
- **Reduced motion** — `prefers-reduced-motion: reduce` makes the flip instant while still functional

## Keyboard shortcuts

- `Tab` — Move focus to the card
- `Enter` — Flip the focused card
- `Space` — Flip the focused card

## Common questions

**Which frameworks is Flip Card available in?**

Flip Card ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Flip Card payment component free?**

Yes. Flip Card is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Flip Card support dark mode?**

Yes. Flip Card ships light and dark themes, both drawn from the Inkpage design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Flip Card live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/flip-card

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt