# Modal — Card Flip

> An accessible payment-card dialog that flips to reveal its content, with a sweeping highlight, keyboard support, and light and dark themes.

- Category: Modal
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Roastery
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: dialog, animation, overlay
- Page: https://builder.atheros.ai/components/modal-card-flip
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_modal_card_flip/preview-60b8a0e42e35.webp

## Features

- Centered hero with a Solstice-blue eyebrow, display heading, subline, and a single solid call-to-action
- One accessible dialog rendered as a two-faced payment card that reveals via the signature Card Flip
- The front is a Solstice Card face (brand mark, contactless glyph, chip, dot-masked number); the back is the dialog dressed as the card's reverse — magnetic stripe, signature strip, masked CVV
- On open the card enters front-first and holds while a holographic sheen sweeps across it, then turns rotateY(0deg)→rotateY(180deg) to the dialog back
- Front and back are two faces of one card via `backface-visibility` on a `preserve-3d` box; entrance opacity lives on an outer stack so it never flattens the 3D scene
- Modal content — signature row, title, text, actions — staggers in timed to land as the flip settles
- A persistent "Flip card" pill below the card turns it over either way at any time; tapping the front flips it too
- Closes via the × button, Not now, Add to Wallet, overlay click, or the Escape key
- Focus moves into the open dialog box and returns to the trigger on close, with a focus trap on Tab
- Responsive layout that stacks the dialog actions on small screens
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog semantics** — The dialog box carries `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing at its title
- **Decorative card front** — The payment-card front (brand mark, chip, number, meta) is `aria-hidden="true"` — only the dialog back is announced; the accessible flip control is the labelled "Flip card" button
- **Hidden state** — The closed dialog is `aria-hidden="true"` and `inert`; JS flips both when opening
- **Focus management** — The dialog box (`tabindex="-1"`) receives focus on open; focus returns to the trigger on close
- **Focus trap** — Tab and Shift+Tab cycle within the dialog while it is open
- **Trigger semantics** — Native `<button>` trigger with `aria-haspopup="dialog"` and an explicit `aria-label`
- **Button labels** — Every button — close, flip, Not now, Add to Wallet — has an explicit `aria-label`; the flip label swaps between front/details
- **Escape hatch** — Escape key, overlay click, and three buttons all dismiss the dialog
- **Focus indicators** — Global `:focus-visible` outline using the `--ring` token
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions and JS skips the front hold, flipping immediately

## Keyboard shortcuts

- `Escape` — Close the open dialog
- `Enter` — Activate the focused trigger or button
- `Space` — Activate the focused trigger or button
- `Tab` — Move focus between the dialog buttons

## Common questions

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

Modal — Card Flip 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 Modal — Card Flip free?**

Modal — Card Flip is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Modal — Card Flip support dark mode?**

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

## Get the code

Preview Modal — Card Flip 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/modal-card-flip

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