---
title: "Business Card Contact"
description: "Business Card - Content features an Image, some Information about the Person, and some additional Infos."
path: https://www.eonshowroom.eon.com/en/content-elements/businesscard-contact.html
lastModified: 2025-06-11T12:59:32.020Z
---

# Business Card Contact

# Business Card Contact

![Martin Luthar](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/man_with_big_smile%3A4-3?fmt=webp)

## Martin Luthar

Working with E.ON Digital Technologies

Brüsseler Platz 1, 45131 Essen

[abc123@eon.com](mailto:abc123@eon.com)

[+4912345](tel:+4912345)

[Facebook E.ON](https://www.facebook.com/EON)

[LinkedIn E.ON](https://www.linkedin.com/company-beta/4383/)

[How to Configure](#how-to)

### Description

The Business Card Content Component can be used to display Contact Information.

- Correct Icons for Social Media Links, Phone and Mail Links are coming automatically if it is configured correctly
- Different Alignment possible

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-businesscard-contact--interactive)

### Inspirations

![Marry Jane](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1035548684_screen%3A4-3?fmt=webp)

## Marry Jane

Working with E.ON Digital Technologies

Brüsseler Platz 1, 45131 Essen

[abc123@eon.com](mailto:abc123@eon.com)

[+4912345](tel:+4912345)

[Facebook E.ON](https://www.facebook.com/EON)

[LinkedIn E.ON](https://www.linkedin.com/company-beta/4383/)

## John Doe

Working with E.ON Digital Technologies

Brüsseler Platz 1, 45131 Essen

[abc123@eon.com](mailto:abc123@eon.com)

[+4912345](tel:+4912345)

[Facebook](https://www.facebook.com/EON)

[LinkedIn](https://www.linkedin.com/company-beta/4383/)

[Instagram](https://www.instagram.com/?hl=de)

[Tiktok](https://www.tiktok.com/de-DE/)

[Contact Data for Outlook](https://www.eonshowroom.eon.com/en/content-elements/businesscard-contact/_jcr_content/root/responsivegrid/section_copy/section/gridcontrol_copy_cop/grid-6-6-2/businesscardcontact_.vcard.vcf)

### Usage Rules & Features

##### Features

- Image is optional
- Download of v-Card can be provided

##### Properties

- Image can have Offset

##### Design

- Business Card Contact Background can have a Lot of different Colors
- Horizontal or vertical Alignment should depend on Grid Columns
- Tooltip Button Size can be Normal or Small

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | yes (vertical) |
| 4 | yes (vertical) |
| 5 | yes (vertical) |
| 6 | yes (horizontal) |
| 8 | yes (horizontal) |
| 9 | yes (horizontal) |
| 10 | yes (horizontal) |
| 12 | no |

##### DO's

- Ensure enough Width so that the Content does not break
- Use vertical Alignment when combining multiple Cards in a Row or as Content in an aside Column

##### DONT's

- Do not use it as a Full Width Component
- Do not use it with vertical Alignment in large Grids like 6, 8, 9, or 12 Column Grid
- Do not use it with horizontal Alignment in small Grids like 2, or 3 Column Grid

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

![Add an Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_image%3A4-3?fmt=webp)

### Add an Image

The Business Card - Contact can be used with or without an Image. If an Image is used, it needs to be added in Image Tab. In this Image Tab, Editor can add an Image and adjust it in same Way as for normal Image Component.The Image can be only cropped with 4:3 Ratio.

[Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html)

[Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html)

[Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html)

![Add Card Information](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_cardinfo%3A1-1?fmt=webp)

### Edit General Information

In Card Information Tab, Editor can enter the General Information, like the Name, some additional Information or Specification, and up to two Addresses. But only the Name is mandatory.

**But Keep in Mind:**

Entering an Address comma-separate each Line, like Street from Town to create a Linebreak. For Example, for

> Brüsseler Platz 1

> 45131 Essen

enter

> Brüsseler Platz 1, 45131 Essen

Manual Linebreaks with "Enter" instead of Comma will not be considered and come all in one Line.

![Add Links as Contact Data](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_contactdata%3A3-4?fmt=webp)

### Add some Contact Links

Furthermore, Editor can add some Links in Contact Data Tab. For each Link an alternative Link Text can be added. This Text will be displayed as Links.

Possible Links are:

- E-Mail
- Phone
- Facebook
- LinkedIn
- Twitter
- Instagram
- Tiktok

![No CTA](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_interaction-none%3A2-1?fmt=webp)

### Add Interaction

In Interaction Tab, Editor can choose to add an additional Button, a Link, or to have no Interaction. Depending on the Selection, Editor needs to provide necessary Information.

For more details see:

[Links](https://www.eonshowroom.eon.com/en/content-elements/link.html)

[Buttons](https://www.eonshowroom.eon.com/en/content-elements/button.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_interaction-button%3A4-3?fmt=webp)

![Add Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_interaction-link%3A4-3?fmt=webp)

![Configure Style](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_style%3A4-3?fmt=webp)

### Configure Style

In Styling Tab, Editor can choose the Layout of the Business Card - Contact.

If "Use vertical Layout" is checked, Business Card - Contact has vertical Orientation. Otherwise, it has horizontal Orientation.

Another Styling Option is for the Alignment. By default, it is left aligned, but right Alignment can be choosen.

Furthermore, an Offset can be added by choosing the Checkbox for it, and it is possible to configure small Text Size for Info Text.

![Choose Color](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_style-color%3A4-3?fmt=webp)

### Adjust Color Scheme

Editor can also select "Adjust Color Scheme" Option.

Once "Adjust Color Scheme" is selected, Editor has to select on which Background the Component is used and then choose a Color Scheme.

### Having a vCard for Business Card Contact

#### What is a vCard or a Virtual Business Card?

A vCard, also known as a Virtual Business Card, is an electronic File Format used to store Contact Information.

vCards are commonly used in Mail Programs, Contact Management Systems, and Mobile Devices to exchange Contact Information between Individuals or Businesses.

vCards are often saved with a .vcf File Extension and can be easily shared via Mail, Messaging Apps, or Downloaded from Websites.

They can be imported into Address Books or Contact Management Software, allowing Users to quickly add new Contacts without manually entering all the Information.

vCards follow a standardized Format defined by the Internet Engineering Task Force (IETF) in RFC 6350. This Format ensures Compatibility and Interoperability across different Platforms and Applications.

![Configure vCard](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_vcard-config%3A4-3?fmt=webp)

#### Configure vCard

For a vCard, Editor needs to decide whether to use vCard Data of the Component, or to Link a File.

- To use vCard Data of the Component "Download vCard" must be choosen and a Label needs to be set.
- If a Link to a File should be used, Editor needs to maintain Link Name, Link Path, and how to open it.

#### Keep in Mind

It is possible to use vCard Data of the Component and to Link a File in parallel. This will result in two Links, but is not recommanded.

![Add Data of vCard](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bc-contact_vcard-data%3A3-4?fmt=webp)

#### Add Data of vCard

In vCard Data Tab, all Information that should be Part of the vCard needs to be filled out.