Contact Card
Displays contact information in a card format with avatar, contact details, description, and optional action button
Demo
API
Tag
| Name | Description |
<aui-contact>
|
Custom Element to display contact information in a card format with avatar, contact details, description, and optional action button. |
Attributes
| Name | Value | Required | Description |
name |
string | Contact person's name. |
|
email |
string | Email address (renders as mailto link). |
|
phone |
string | Phone number (renders as tel link). |
|
i18n |
string |
A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Properties
| Name | Value | Required | Description |
|---|---|---|---|
name |
string | Contact person's name | |
email |
string | Email address (renders as mailto link) | |
phone |
string | Phone number (renders as tel link) | |
i18n |
object |
A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Slots
| Name | Description |
|---|---|
avatar |
Avatar or profile image |
description |
Description text about the contact |
action |
Custom action content (e.g., button or link) |
Demo
API
Tag
| Name | Description |
<AuiContact>
|
Custom Element to display contact information in a card format with avatar, contact details, description, and optional action button. |
Props
| Name | Value | Required | Description |
name |
string |
Contact person's name. |
|
email |
string |
Email address (renders as mailto link). |
|
phone |
string |
Phone number (renders as tel link). |
|
i18n |
object |
A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Skylab React links
i18n Strings
| ID | Description | Default value |
|---|---|---|
contact.role.accountManager
|
Label for the account manager role | Account manager |
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com