Avatars

Avatar

Usage:

Available Avatar Set

• Small (32p) use when the medium size is too big for the layout, or when the avatar has less importance
• Medium (40p) use as the default size

small

medium(Default)

Special Avatar Set

• Extra small (24p) use in tightly condensed layouts e.g. Table
• Large (40p) and Extra Large (60p) use when an avatar is a focal point, such as on a single customer card or in user profile page

extra small

large

extra large

Grouped Avatar Set

Use avatar group when you want to display a collection of avatars. You can also use them for easy collapse states for a set number of avatars and with a dropdown to show hidden avatars. Use extra small size only for this type of set.

Available Avatar Type

• Default (image) dan Default (initial) pilihan user, default image avatar ketika user tidak upload image
• Icon avatar icon hanya digunakan selain untuk profile, misal mewakili bisnis, jenis akun atau enterprise

default(image)

default(initial)

icon

Users can choose an avatar whether to use an image or initial when using an image whether to use the default or upload their own avatar (proposal)

Unset/Hover Avatar

• Unset this case is a condition where the avatar is not set up yet for the first time or is being removed/unset by the user
• Hover this case is a condition where the avatar is set up and hovered by the cursor to indicate that the avatar is editable

default(image)

default(initial)

icon

each size avatar has its size camera icon, xsmall and small avatar use 16p icon, medium use 20p icon, large use 24p icon and the xlarge avatar will be use 32p icon size

Pattern Rule

Best Practice

• Extra small (24 x 24 px): use in tightly condensed layouts.
• Small (32 × 32 px): use when the medium size is too big for the layout, or when the avatar has less importance.
• Medium (40 × 40 px): use as the default size.
• Large (60 × 60 px): use when an avatar is a focal point, such as on a single customer card.

Do

• Always add the name of the person using the name property.
• For the best results, use square images or images cropped into a square.

Don’t

• Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.