Avatars and avatar groups
How to add and style avatars, and avatar groups
Last updated
Was this helpful?
How to add and style avatars, and avatar groups
Last updated
Was this helpful?
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
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:
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.
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.
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.
The avatar can be shown as 'online' or 'offline' by selecting its state:
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.
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:
An avatar group is a part that contains a series of avatars.
More information on avatar groups is coming soon.
Like many other parts, , , , , , , and can be applied using the property editor on the right, once the avatar has been selected.
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 as usual, using the text editing panel.
Adding links
Icons
Text
Images
Masks
Customizing and formatting
