Purpose
Two distinct components live in frontend/kundkort/components/sections/:
ContactInfoCard.tsx— company-level contact facts (website, switchboard phone, customer-service email, social links). Renders in the Översikt tab.ContactsSection.tsx— per-person directory grouped by role. Renders in the Kontakter tab.
ContactInfoCard
Fields:
| Label | Source field |
|---|---|
| Hemsida | data.hemsida (anchored, prepends https:// if missing) |
| Telefon | data.telefon (clickable tel: link) + data.telefon_source pill |
| E-post kundtjänst | data.kundtjanst_email (clickable mailto:) |
| Hemsida status | data.website_active → “Aktiv”/“Inaktiv”/”—“ |
| Sociala medier | renders inline SVG icons for social_links.twitter, .facebook, .instagram only — no other platforms |
The website status indicator uses --status-ok/--status-error/--text-muted colours.
ContactsSection
Renders one block per role, ordered by CONTACT_ROLE_ORDER from frontend/kundkort/types/kundkort.ts:113-128:
VD, Styrelseordförande, Styrelseledamot, Marknadschef,
Försäljningschef, HR_chef, Miljöchef, IT_chef, ÖvrigaEach role has a coloured left border (CSS var --role-vd, --role-board, etc — defined in index.css:26-33). The Övriga role hides the block when empty (hideIfEmpty: true).
Empty roles still render an “Ej identifierad” placeholder with a GapBadge. Populated roles render a responsive grid of ContactCard (min 200 px columns).
ContactCard contents
Per KundkortContact from types/kundkort.ts:1-10:
full_name(or “Okänt namn”)role(greyed)phone+phone_type(“mobil”/“fast”)email(truncated with title attr)sourcepill (e.g. “crawlee”, “google_places”)
If neither phone nor email present, shows “Ingen kontaktinfo” in italics.
See also
Identity Card, UI Primitives, ContactDistributionChart.