Contact Card
Person or business contact card: avatar, role, contact rows (email, phone, location, website) that copy on click, social links as generic glyphs, and Add to contacts (vCard download by default); vertical and horizontal.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Person or business; names the card. |
| role / organization | string | — | Shown under the name. |
| avatar | ReactNode | initials | Avatar content; defaults to initials. |
| tone | string | "var(--chart-4)" | Avatar fill (any CSS colour, use tokens). |
| rows | { kind: "email" | "phone" | "location" | "website"; value }[] | [] | Contact rows; each copies its value on click. |
| socials | { label; href; glyph: "chat" | "video" | "code" | "camera" | "globe" | "pen" }[] | [] | Profile links drawn with generic glyphs. |
| orientation | "vertical" | "horizontal" | "vertical" | Stacked or side-by-side layout. |
| onAddToContacts | () => void | vCard download | Replaces the default .vcf download. |
| defaultAdded | boolean | false | Start in the added state. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.