Contact Details
📖 Overview
The Contact Details block displays contact information such as email addresses, phone numbers, and physical locations with accompanying icons. It supports two display styles: a compact inline layout for simple listings, or an expanded card-style layout with labels and descriptions for more detailed contact information.
✏️ Content Options
Contact items are managed via a repeater field. Use the “Add Contact Item” button to add as many items as needed.
| Field | Type | Required | Description |
|---|---|---|---|
| Icon Source | Select | Yes | Choose between using a preset icon or uploading a custom icon |
| Preset Icon | Select | Conditional | Select from Email, Phone, or Location icons. Only visible when Icon Source is set to “Preset Icon” |
| Custom Icon | Image | Conditional | Upload a custom icon image (SVG, PNG, JPG, JPEG, or WebP). Only visible when Icon Source is set to “Custom Icon” |
| Label | Text | No | A heading label for the contact item, e.g. “Email”, “Phone”, “Office”. Only visible when Display Style is set to “Expanded” |
| Description | Textarea | No | Optional description text for additional context. Only visible when Display Style is set to “Expanded” |
| Link | Link | No | The contact link (e.g. mailto:, tel:, or URL) |
| Additional Info | Text | No | Static text that displays instead of the link. Use for items that don’t require a clickable link |
⚙️ Settings Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Display Style | Select | Compact | Choose how to display the contact details. “Compact” shows inline icons with values. “Expanded” shows a card layout with labels and descriptions |
🎨 Styling
This block uses the theme’s global spacing and icon size variables rather than block-specific CSS variables. The two display styles apply different layouts:
- Compact: Horizontal flexbox layout with items aligned inline, using
--spacing-xxsgap - Expanded: Grid layout with larger gaps (
--spacing-m), labels styled as heading level 3
Custom icons are constrained to a maximum width of --icon-med.