# Flip card

A card with two faces, turned over by a button: a summary on the front and its detail on the back, a question and its answer. Only the face shown is in the page for the keyboard and screen readers: the other is `inert` and hidden from assistive technology, as it is from sight. The button ("Show back", "Show front") sits under the faces and doesn't turn with them, so focus stays on it; its name ends with what the card is ("Show back, Pricing"). The card is as tall as its taller face.

- Registry name: `flip-card` (`@candor/flip-card`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/flip-card

## Install

```bash
npx candor-ui add flip-card
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/flip-card`.
It brings in: button, locale, motion, tokens, utils.
npm packages: lucide-react@^1.67.0.

## Example

```tsx
"use client"

import { FlipCard } from "@/components/candor/ui/flip-card"

export default function Example() {
  return (
    <FlipCard
      label="Team plan"
      className="max-w-xs"
      front={
        <div className="flex flex-col gap-1">
          <p className="text-sm text-muted-foreground">Team plan</p>
          <p className="text-2xl font-semibold">$24 a seat</p>
          <p className="text-sm text-muted-foreground">Billed monthly</p>
        </div>
      }
      back={
        <ul className="flex list-disc flex-col gap-1 ps-4 text-sm">
          <li>Up to 50 seats</li>
          <li>Shared agent runs and approvals</li>
          <li>Audit log kept for a year</li>
        </ul>
      }
    />
  )
}
```

## <FlipCard>

Props:

- `front: React.ReactNode`: The face shown first.
- `back: React.ReactNode`: The face the button turns to.
- `flipped?: boolean | undefined`: Whether the back is shown, when you control it.
- `defaultFlipped?: boolean | undefined` (default `false`): Whether the back is shown at first, when you don't control it. Defaults to false.
- `onFlippedChange?: ((flipped: boolean) => void) | undefined`: Called with the face the person turned to: true for the back.
- `label: string`: What the card is, said after the button's words: "Pricing" reads "Show back, Pricing".
- `className?: string | undefined`: Classes for the root, merged with Candor's.

## Strings (`flipCard`)

The fixed words, English by default. Override any of them under `flipCard` in `<LocaleProvider strings={{ flipCard: { … } }}>`; the table is exported as `flipCardStrings`.

- `showBack`: Show back
- `showFront`: Show front
- `name`: {action}, {label}

## Motion

- **turn** (move): When the person presses the card's button (or the app sets `flipped`), the card turns over about its upright axis to the other face. Under reduced motion or the calm level the faces swap at once, and a card drawn on either face is drawn still.

Set with `--cd-motion-flip-card-<moment>-*` in your brand file; the families are in the design reference.

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider`: its fixed strings in `strings`, its nouns in `nouns`; entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.