Contact Card
A contact card with expandable details in a sheet, including personal info, notes, and attachments.
AR
Features
- Compact card view — Essential info at a glance
- Expandable sheet — Full details on click
- Tabbed content — Info, notes, and attachments
- Quick actions — Call, email, copy
Examples
Different contact types with varying information. Click on any contact to view full details.
| Name | Type | Job Title | Company | Phone | Rate | Overtime | |
|---|---|---|---|---|---|---|---|
AR | Crew | Director of Photography | Rasmussen Productions | adrian@example.com | +1 (555) 123-4567 | $1,500.00 | — |
DH | Vendor | — | Discovery Health Medical | contact@discoveryhealth.com | +1 (555) 987-6543 | $2,500.00 | — |
SM | Talent | Lead Actor | Mitchell Talent Agency | sarah.mitchell@agency.com | +1 (555) 246-8135 | $5,000.00 | — |
MC | Client | Creative Director | Brand Studio Inc | m.chen@brandstudio.com | +1 (555) 369-2580 | $ | — |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Contact's full name |
| string | - | Contact's email | |
| phone | string | - | Contact's phone number |
| avatar | string | - | Avatar image URL |
| company | string | - | Company name |
| role | string | - | Job title/role |
Components Used
cardavatarbuttonsheetbadgetabs