## Contact Card (S—220)

A person card with quick actions: copy email or phone with feedback, see their local time, and expand for more details.

- URL: https://sundaeui.dev/components/contact-card
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/contact-card.json`
- Tags: card, contact, directory, profile, person, copy

Avatar, name, role and a live local-time line (“3:42 pm for Ana, 6 hours ahead”). Quick actions copy the email or phone and confirm with a check.
More details expands team, manager and links. A “Favourite” star pins them.

### Usage

```tsx
import { ContactCard } from '@/components/sundae/contact-card'

<ContactCard />
```

### Props

- `person` (`Person`, required): Name, role, email, phone, tz, details.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Team directories, CRM records, account owner cards.

### When not to use

- Public profiles with social content: use a profile page.

### Accessibility

- Actions are buttons naming what they copy; results are announced.
- Details use a disclosure button with aria-expanded.
- Reduced motion removes the movement and keeps every state change.