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 GuidelinesAnatomy
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.
Heading/Subheading
The heading and subheading 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
