# ElvixCard

> The chrome every SDK lives in. Brand-tinted border, Secured-by-elvix badge breakpoint, scrollable body + pinned footer pattern.

<!-- components/username-pane.tsx -->
```tsx
import { ElvixCard, ElvixUsername } from "@elvix.is/sdk/react";

export function UsernamePane() {
  return (
    <ElvixCard title="Pick a username">
      {/* card={false} — the component would otherwise render its own card */}
      <ElvixUsername card={false} />
    </ElvixCard>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `string` | optional | — | Card header text. Omit for headerless cards. |
| `subtitle` | `string` | optional | — | One-line subtitle under the title. |
| `children` | `React.ReactNode` | **required** | — | The card body. Every `<Elvix*>` SDK component is designed to render inside. |
| `footer` | `React.ReactNode` | optional | Secured-by-elvix badge | Pinned-bottom footer slot. Defaults to the Secured-by-elvix badge. Override with your own row. |
| `size` | `"sm" \| "md" \| "lg"` | optional | `"md"` | Width scale. Affects max-width and padding only. |
| `tone` | `"brand" \| "neutral"` | optional | `"brand"` | Border + chord wash. Neutral for surfaces nested inside another brand chord. |

> **Note:** The card paints from `--elvix-primary`, installed by `<ElvixProvider>`, so the chord stays in sync with your Console config without prop drilling.

> **Note:** **Every SDK mutation component renders its own `<ElvixCard>` by default and accepts `card?: boolean` to drop it.** `ElvixIdentityForm`, `ElvixUsername`, `ElvixRegion`, `ElvixLanguages`, `ElvixAddressBook` (+ the billing / shipping aliases), `ElvixLegalEntities`, `ElvixSessions`, `ElvixAppPasskeys`, `ElvixExport`, `ElvixLeave`, and `ElvixDeactivate` all default to `card={true}`. Pass `card={false}` when you're composing several into one shared card, or dropping a component into your own already-styled surface — the form renders bare, no border, no badge.

## Mount animation (0.7.12+)

On mount, the card paints a brand-coloured trace that starts at the RIGHT edge of the Secured-by-elvix badge, draws clockwise around the perimeter, and ends at the badge's LEFT edge. Once the trace finishes, a static soft brand-tinted border fades in and the content settles. The Secured-by-elvix pill itself fades in first (200ms delay) so the badge is visible the moment the user sees the card.

> **Note:** **Per-card override**: `<ElvixCard animated={false}>` disables the animation for ONE card while leaving the rest of the surface animated. **SDK-wide kill**: `<ElvixProvider animated={false}>` disables motion across every nested `<Elvix*>` component in one move (implemented via `framer-motion`'s `MotionConfig reducedMotion="always"`). When `animated` is left at its default the provider broadcasts `reducedMotion="user"`, so the SDK respects the browser's `prefers-reduced-motion` automatically.

## Realistic example

Title, subtitle, custom footer slot, and an explicit size. The card body is the slot every `<Elvix*>` component is designed to fit: sign-in, identity form, avatar editor, and so on.

<!-- components/profile-pane.tsx -->
```tsx
import { ElvixCard, ElvixIdentityForm } from "@elvix.is/sdk/react";

export function ProfilePane() {
  return (
    <ElvixCard
      title="Your profile"
      subtitle="Visible to the apps you've signed into."
      footer={<p className="text-[11px] text-fg-3">Powered by elvix</p>}
      size="md"
    >
      <ElvixIdentityForm card={false} onSuccess={(u) => console.log("saved", u)} />
    </ElvixCard>
  );
}
```


## Related

- [ElvixProvider](/docs/components/elvix-provider.md): Top-level context. Fetches the brand chord, factor config, and copy from elvix; pipes session state and the event channel to every nested <Elvix*> component.
- [ElvixSecuredBadge](/docs/components/elvix-secured-badge.md): The official "Secured by elvix" pill chip with the shield mark. Same visual language as Stripe's "powered by" chip, drop-in anywhere you want users to see their sign-in is governed by elvix.