4.47.6

Toggle direction

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).
`type`	'cam_owned' \| 'queue_based' \| 'sales_owned' \| 'no_cam'		Determines the description text and action button displayed. `cam_owned` and `sales_owned` show a "Schedule a meeting" action button. `queue_based` shows a custom avatar. `no_cam` displays a warning alert without contact information.
`schedulingurl`	string	Required when `type` is `cam_owned` or `sales_owned`	URL for the action button (used when type is `cam_owned` or `sales_owned`). Required when `hasAction` is true.
`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)
`type`	'cam_owned' \| 'queue_based' \| 'sales_owned' \| 'no_cam'		Determines the description text and action button displayed
`schedulingUrl`	string	Required when `type` is `cam_owned` or `sales_owned`	URL for the action button (used when type is cam_owned or sales_owned). Required when `hasAction` is true.
`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 (only used when `type` is `cam_owned`)

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).
`type`	'cam_owned' \| 'queue_based' \| 'sales_owned' \| 'no_cam'		Determines the description text and action button displayed.
`schedulingUrl`	string	Required when `type` is `cam_owned` or `sales_owned`	URL for the action button (used when type is cam_owned or sales_owned). Required when `hasAction` is true.
`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

General information about using our React package

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