Avatar

Avatars provide a placeholder identity for users and visually represent contacts and accounts within ActiveCampaign. They are also often used to help visually organize comment threads in Conversations.

Overview

Resources

Install

yarn add @activecampaign/camp-components-avatar

Variations

Avatar is used to display a profile picture, initials of the user, or an icon to represent a user or account. There are three types of avatars typically used at ActiveCampaign.

Image avatar

Use whenever an image is available for a contact, user, or account.

import Avatar from '@activecampaign/camp-components-avatar';
 
<Avatar src="https://community.activecampaign.com/user_avatar/campy.png" />;

Initials avatar

Use when a contact, user, or account has no image set. Set color to provide a background color. Background can be any 200-level color (ocean200, lavender200, and so on). If no color is set, a random 200-level color shows on page load. Initials automatically pull from the first letter of the first and last names set by the name prop.

import Avatar from '@activecampaign/camp-components-avatar';
 
<Avatar name="Michael Jordan" color="banana" />;

Icon avatar

The icon avatar is used as a fallback when no image, and no initials are available for the contact, user, or account.

Contact

import Avatar from '@activecampaign/camp-components-avatar';
 
<Avatar appearance="userContact" />;

Account

import Avatar from '@activecampaign/camp-components-avatar';
 
<Avatar appearance="accountBusiness" />;

Sizes

Avatar is used to display a circular profile picture, initials of the user, or a user icon. Avatar is often used to indicate to the user that they are signed in. There are three types of avatars typically used at ActiveCampaign. Note that while available, avatars in the large size are not actively used in the product.

• Small: Use when space is very limited, such as within a dropdown to indicate a contact or account
• Medium: Use in tables, as well as in activity feeds to show contact actions
• xLarge: Use at the top of a contact or account’s details page

import Avatar from '@activecampaign/camp-components-avatar';
 
<Avatar
 size="small"
 name="Campy"
 src="https://community.activecampaign.com/user_avatar/campy.png"
/>
 
<Avatar
 size="medium"
 name="Campy"
 src="https://community.activecampaign.com/user_avatar/campy.png"
/>
 
<Avatar
 size="xLarge"
 name="Campy"
 src="https://community.activecampaign.com/user_avatar/campy.png"
 />