# Card Pattern

Ready made cards for common flows: sign in, order summary, onboarding, stepper and two-factor.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/card-pattern
```

## Usage

```tsx
import { SignInCard } from '@/components/fetaui/card-pattern'

export function Example() {
  return <SignInCard product="Halden" onMagicLink={sendLink} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| SignInCard | product, providers, mark, legal, onProvider, onMagicLink |  |
| OrderSummaryCard | name, detail, subtotal, discount, discountLabel, taxRate, defaultPromo, defaultApplied, onApplyPromo, onPay |  |
| OnboardingCard | steps, illustration, onSkip, onDone |  |
| StepperCard | steps, onDone |  |
| TwoFactorCard | secret, stepLabel, apps, qr, onContinue |  |
| animated | boolean | true |

## When to use

- As a starting point for a flow that fits on one card.
- Copy one in and change the content.

## When not to use

- For long forms: use Fieldset on a page.
- For a full checkout with saved cards and addresses.

## Accessibility

- Native forms, with Field tying each label to its input.
- Stepper steps are an ordered list with aria-current on the active step.
- Onboarding progress is named Step 1 of 3.
- Replace the default QR art in Two-factor with a real code through `qr`. The key stays readable as text.

## Motion

- Onboarding and Stepper slide the body in from 16 px over 240 ms.
- Order summary rolls the total, tax and discount when a promo applies.
- The progress pill eases its width to the current step.
- With reduced motion, steps and digits swap in place.