Contact Item

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

Anatomy

Avatar

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.

Title/Subtitle

The title and subtitle is allowed to wrap up to two lines before truncating.

Types

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.

Person

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.

Group

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.).

States

Variations

Avatar/No Avatar

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.

Single Line

A content type can only have a title, depending on the use case.

Specifications

Padding

Styling