Contact details

Contact details display communication information for a person, company, distribution list or individual channel. This can include a name, a phone number or email address.

Contact details how to build

Use this pattern to:

  • Provide details and direct channels of communication for sales or support purposes.
  • Display contact information in a directory or CRM (Customer Relationship Management) system.
  • Allow users to populate form fields in a workflow with details from a list of contacts, e.g., client contact selection for a ticket.
Best practices

Consider a data grid when you need to display many contacts with a standardized set of contact information.

The contact details pattern comprises an avatar and text elements:

  1. Avatar: A visual representation of the contact that provides a point of reference at glance.
  2. Header: Contains the name of the contact. Optionally, use text to display further information such as company names or company ID.
  3. Additional details: Relevant meta data, e.g., role, location, phone number or email. You can define the details as links, making them interactive, to enable immediate communication to a contact from within your application.
Contact details with component annotations
Best practices

Keep label lengths similar to ensure close proximity to their respective values. If you’re displaying supplementary details, we recommend that you left align their labels.

Use StackLayout to display the avatar and all text elements that make up contact details in a row.

Contact Details with layout annotations

Use StackLayout to display the additional details in a row.

Contact Details with layout annotations

Use StackLayout to display the header and additional details section in a column.

Contact Details with layout annotations

You can use icon descriptors as a visually concise alternative to textual labels—to help users quickly identify the available communication channels.

Contact Details using Icon Descriptors
An example of contact details using descriptive icons.
Best practices

Refrain from using icon descriptors when you have multiple values for similar channels, such as work and cellphone numbers.

We recommend emails to be interactive links by default, you can also define other details (e.g. phone number) as links, making them interactive—to enable immediate communication to a contact from within your application.

Contact Details using Icon Descriptors
An example of contact details using links.

You can embed contact details in a range of container components.

This example demonstrates the component embedded within a card.

Contact Details Embedded in a Card
Contact details embedded within a card.

You can define quick actions, one-click shortcuts to specific functions or features. This can include starting a new email in Outlook, or calling a contact in Zoom.

Ensure that quick action buttons have a tooltip displayed as per the icon only button best practices.

For layout guidance, refer to the button bar pattern.

Contact Details with quick actions button bar
Contact details with a quick actions button bar.

If you’re displaying supplementary details, you can configure them to be collapsible.

Contact Details with collapsible details
Contact details with collapsible details.
Collapsible detail layout
Use a split layout between quick actions and the collapsible button.
Best practices

Consider making supplementary details collapsible when they contain secondary information, and don’t need to be always on display.

The list version allows you to display a snapshot of key details. It’s ideal when you have restricted real estate, such as in a client picker dropdown menu or a contact directory list.

To show as many options as possible, we recommend you keep data points to no more than one line. Prioritize the most important values.

The link function won't be able to be applied to the text content (e.g. email or phone number) as it is an list item that users select as a whole option from the dropdown.

Contact Details in list
Contact details in a list.

Use StackLayout to display the text elements underneath the header in a row.

Contact Details in list using stack layout.
Contact Details in list using stack layout.
DateSummary
2024-09-27Updated email with Link.

If you need to expand the pattern or share feedback with us, please contact the team.