Contact Info

Overview

Renders a list of contact items, each with an icon determined by its type, a label, and a value. Email and phone values are automatically wrapped in mailto: and tel: links.

Usage

import { ContactInfo } from "@leanicon/web-builder-library";

Default

All four item types: address, email, phone, and hours.

With social links

Pass socialLinks to display a row of platform links below the contact items.

Email and phone only

A minimal set with just email and phone items.

Single item

A single contact item.

With custom href

Override the auto-generated link via the href field — e.g. a mailto: with a subject or a Google Maps link for an address.

Minimal with social links

A single contact item paired with social links.

With social icons

Set showSocialIcons to render platform icons (from Lucide) instead of text labels. Supports twitter, linkedin, github, youtube, instagram, facebook, and discord.

Dark mode

With social links — dark mode

Email and phone only — dark mode

Single item — dark mode

With custom href — dark mode

Minimal with social links — dark mode

With social icons — dark mode

Props

ContactInfoItem

SocialLink

Notes

• Email items automatically generate mailto: links; phone items generate tel: links.
• Provide href on an item to override the auto-generated link (e.g., a custom mailto with subject or a Google Maps link for an address).
• Social link text is capitalized via CSS when showSocialIcons is off.
• showSocialIcons renders Lucide icons for known platforms: twitter/x, linkedin, github, youtube, instagram, facebook, discord. Unknown platforms fall back to text.
• Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.