Avatar Block – who or what a record belongs to¶
The avatar shows a person or a thing as a picture in a circle, and as the initials of its name where there is no picture. A face is recognised faster than a name is read, which makes avatars useful for owners, assignees, contacts and companies.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Shows a picture, an icon or initials for a name |
| Typical use | Assignee of a ticket, contact person, company logo |
| Related | Image Block (pictures that are content), Badge Block |
The avatar is built around the picture being optional: give it the name, and it always has something to show. An image block, in contrast, shows a picture that is content and shows nothing without one.
2. Settings¶
| Setting | Meaning | Default |
|---|---|---|
| "Value" | The name behind the avatar. The initials, the tooltip and what a screen reader announces are taken from it. | none – an avatar without picture and value shows nothing |
| "Image" (Appearance) | Picture or icon. An icon is drawn as an icon, a picture fills the shape. | none – the initials are shown |
| "Initials" (Appearance) | Text shown instead of a picture | first letter of the first and of the last word of the value |
| "Alt Text" (Appearance) | Alternative text of the picture | the value |
| "Variant" (Appearance) | Shape: Circle, Rounded (rounded square), Square | Circle |
| "Size" (Size) | Size preset: ExtraSmall 1.5rem, Small 1.75rem, Medium 2rem (the height of an input), Large 2.5rem, ExtraLarge 4rem | Default (= Medium) |
| "Avatar Size" (Size) | Edge length as a CSS length (48px). Everything inside – initials, icon – is scaled from it. |
none |
| "Click Action" | Action run when the avatar is clicked. An avatar with one is shown as clickable on hover. Only in forms with an entity. | none |
The colors of the initials come from "Text Color" and "Background Color" of the settings every block has.
3. Behaviour¶
- Which size wins: "Avatar Size" first, then the height of the block, then its width, and only then the preset. An avatar is always square.
- While the image expression returns nothing, the initials are shown – a record without a photo still looks like an avatar.
- Without a tooltip of its own, the avatar shows the value as its tooltip.
4. Example¶
Assignee. "Value" = the display name of the assignee ("Maria Keller"), "Image" = the photo of the assignee's user record, "Size" = Large. Users with a photo appear with it, all others as "MK". "Click Action" opens the user's record.
Company. "Variant" = Rounded for a company, so it does not read as a portrait.