Contact Tiles

Display key contact methods with icons

Use the ContactTiles component to display key contact methods — like email, phone, or support — in a clean, visual format using icons and labels.

<ContactTiles
    email={{ text: 'ui@webcore.dev' }}
    phone={{ text: '+1 23 456 7890' }}
    support={{ text: '<a href="#">Contact support</a>' }}
/>

You can use three types of props for three types of contact methods. Each object accepts the following properties:

• icon: You can optionally pass an icon property to set a custom icon. If not set, a default icon will be used.
• title: You can optionally also set titles which are set to the above by default if you omit the property.
• text: Sets the text of the contact tile. You can pass HTML to format your text or provide links for users.

Alignments

You can configure the default center alignment of your tiles using the alignment prop:

<ContactTiles
    email={{ text: 'ui@webcore.dev' }}
    phone={{ text: '+1 23 456 7890' }}
    support={{ text: '<a href="#">Contact support</a>' }}
    alignment="left"
/>

<ContactTiles
    email={{ text: 'ui@webcore.dev' }}
    phone={{ text: '+1 23 456 7890' }}
    support={{ text: '<a href="#">Contact support</a>' }}
    alignment="right"
/>

Different Layouts

The component is compatible with the GridWithIcons component, meaning you can pass other GridWithIcons props to this component. For example, change your layout using the iconWithBackground and secondary props:

<ContactTiles
    email={{ text: 'ui@webcore.dev' }}
    phone={{ text: '+1 23 456 7890' }}
    support={{ text: '<a href="#">Contact support</a>' }}
    alignment="right"
    iconWithBackground={true}
    secondary={true}
/>

API

type ContactItem = {
    icon?: string
    title?: string
    text: string
}

type ContactTilesProps = {
    email?: ContactItem
    phone?: ContactItem
    support?: ContactItem
} & Omit<GridWithIconsProps, 'items'>