Avatars and avatar groups

How to add and style avatars, and avatar groups

What is an Avatar?

The avatar part is typically used to display circular user profile pictures, but can also display icons and text. The avatar can also come in different shapes.

Location in the Parts Library: Base Parts > Data Display > Avatar

Adding an Avatar

To add an avatar, select the part where you’d like to add your avatar and click ‘+’.

There is a wide range of pre-styled avatars for you to choose from. Choose from one of the pre-styled avatars:

Example Avatars

Styling an Avatar

Like many other parts, borders, shadow, opacity, sizes, spacing, colors, and color gradients can be applied using the property editor on the right, once the avatar has been selected.

Changing an Image or an Icon in an Avatar

To change the icon in an avatar, select the icon to activate the Icon Editor in the right menu. Then click on Icon > Value Set to reveal all of the icons available for you to choose from, and select.

The filter function can help you locate your preferred icon. For example, if you know you want an icon containing an arrow, key in ‘arrow’, and the result will return icons labeled as containing an arrow.

To change the image, select the image to activate the Image Editor in the right menu. Select Image > Value Set, then toggle to ‘Choose’. You will see all of the images in your Media Gallery. Select the most appropriate image or upload a new one, and it will replace the original image.

Changing an Image or Icon in an Avatar

Rounding

The rounding of the avatar can be amended so that it’s either completely round, rounded around the edges to varying degrees, or flat like a tile.

To apply rounding, select the avatar, open the Decoration Editor in the right property panel, and go to the 'rounding' tab.

Please note that if you have an image inside your avatar, you may need to apply the same rounding to the image to achieve the desired shape.

Linking the Avatar

To add a link to your avatar, first select the avatar. On the right editor menu, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.

Changing the State of the Avatar - Online and Offline

The avatar can be shown as 'online' or 'offline' by selecting its state:

State of Avatar - Online or Offline

Changing the Shape of an Avatar with a Mask

There are some pre-built avatars with masks that alter the shape of an avatar with an image. A mask crops the content of the image.

To alter the shape of the mask, add an avatar from the base parts containing a mask part. Then select the mask to open the mask property editor in the right panel. Then click on Shape > Value Set to reveal all of the mask shapes available for you to choose from, and select your preferred shape.

Changing the Avatar Mask Shape

Avatar Placeholders

An avatar placeholder is an avatar has a small amount of text in it in the center of the avatar. This could be a letter or a couple of letters, for example:

Avatar Placeholder Examples

To edit an avatar placeholder, add an avatar from the base parts that is an avatar placeholder. Select the text within the avatar to open the text property editor in the right panel. Then click on Text > Value Set to enter the new value for your text. You can then edit the small amount of text as usual, using the text editing panel.

Editing an Avatar Placeholder

What is an Avatar Group?

An avatar group is a part that contains a series of avatars.

Example Avatar Group

More information on avatar groups is coming soon.

Related Information

Adding links

Icons

Text

Images

Masks

Customizing and formatting