Persona

Appearance

On this page

avatar 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
Avatar Image
small
Avatar Image
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
Avatar Image
extra small
Avatar Image
large
Avatar Image
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.
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image

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
Avatar Image
default(image)
Avatar 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
Avatar Image
default(image)
Avatar 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.

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital