The contact item component is a more complex alternative to a standard line of text found in a list or form component. Use this component when you have a list or set of items that can benefit from an additional line of content or an avatar.Demo and Developer GuidelinesFigma Component
The contact item uses the large avatar component. All avatar types – initials, icon and image can be used for the contact item component. Visit the avatar component page to learn more.
The heading and subheading is allowed to wrap up to two lines before truncating.
An avatar with an image can be used for any of the following contact item types. If an image is not available it will fall back to the defined sets below.
The first line should display the person’s first name and last name. The last name is required on a contact. If first name is missing, use -- as a placeholder. The second line can have any relevant secondary content like the company the user is associated with.
The first line should display the group name. The second line will show the members in the menu that belong to that group (1 member, 99 members, etc.).
The choice to use an avatar or not for a contact item is up to the designer. However the group select smart component will always use an avatar.
A content type can only have a title, depending on the use case.