Contact cards
Contact cards represent people connected to a policy, claim, or account — internal WS staff, carrier underwriters and adjusters, and client contacts. They surface name, role, organization, and contact methods in a consistent shell that works across grid layouts and panel contexts.
Contact card component
The standard contact card shows an avatar (photo or initials), name, role and organization, and contact actions. An "Internal" tag distinguishes WS staff from external contacts.
Internal contacts (WS staff)
External contacts (carrier / client)
Compact contact card
The compact variant fits within right rail panels (340px) or condensed drawers where the full card would be too wide. It uses a smaller avatar and omits secondary contact details.
Carrier contacts panel
Carrier contacts panels appear in the right rail or a condensed drawer when viewing a policy or claim. They group contacts by role — Underwriter, Claims Adjuster, Billing — and link each contact's email and phone.
Liberty Mutual Contacts
Contacts page grid
On a dedicated contacts page, all contacts for an account appear in a filterable grid. Filter chips let users narrow by type (Internal, Carrier, Client) or by role.
Usage guidance
- Always show a type tag (Internal / Carrier / Client) on every contact card.
- Use initials avatars when no photo is available — derive background color from the person's ID.
- Make email and phone number directly clickable (
mailto:/tel:). - Group carrier contacts by role (Underwriting, Claims, Billing) in panel views.
- Don't show contact phone numbers without extension where applicable.
- Don't use photos from personal social profiles — only approved company directories.
- Don't show more than 6 contacts in the compact panel before a "Show more" link.