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-xxs gap
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.