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.
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.
Consider a data grid when you need to display many contacts with a standardized set of contact information.
Contact details are comprised of an avatar and text elements. You can use a title as a name of a contact or a company. Optional details can be company names or company ID. You can display any relevant meta data that you want to communicate depending on the requirements of your applications.
You can define the details as links, making them interactive, to enable immediate communication to a contact from within your application.
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.
You can use icon descriptors as a visually concise alternative to textual labels—to help users quickly identify the available communication channels.
Refrain from using icon descriptors when you have multiple values for similar channels, such as work and cellphone numbers.
You can embed contact details in a range of container components.
This example demonstrates the component 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
If you’re displaying supplementary details, you can configure them to be collapsible.
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.
If you need to expand the pattern or share feedback with us, please contact the team.