AX - Avatar

Overview

AX - Avatar is an Experience Cloud component that displays profile pictures, initials, or icons on Experience Sites pages to represent users, contacts, accounts, or any Salesforce record.

Use it to show portal user profiles, account representatives, contact lists, or entity identifiers with consistent visual styling. The component automatically displays images when available or falls back to initials or icons.

Perfect for user profile headers, community member lists, contact directories, or anywhere portal users need visual identification of people or entities.

---

Customizing the Avatar

The Avonni Avatar component helps you create visually consistent representations of users or entities within your Salesforce Experience Cloud site. Here's a step-by-step guide to personalize the Avatar to fit your needs:

Displaying Initials

The Avatar component offers flexibility in how you display initials:

Manual Entry

If you know the initials you want to display, enter them directly into the "Initials" field.

Dynamic Generation (Expressions)

To make your Avonni components dynamic, you can use Experience Cloud Expressions. For example, in the Avatar component below, you can use the following expression to display the currently logged-in user's name automatically:

{!User.Record.Name} 

You can replace Name with the actual field name storing the user's name in your Salesforce org.

If you'd like to automatically generate initials from a full name, enable the "Initials Auto Formatted" option. This will use Experience Cloud expressions to extract and format the first letter of each word in the name.

Displaying Initials Dynamically from the Current User's Name

Custom Image

Add a profile photo, logo, or any image to make the Avatar instantly recognizable. Upload your image using the Selected Content option—the component automatically crops and formats it to fit within the Avatar shape.

If no image is added, the Avatar displays initials instead

Variant (Shape)

Choose between circle or square using the Variant field to match your portal's design. Circular avatars work well for people, while square shapes suit logos or entity icons

Size

Control how large the Avatar appears on the page using the Size property. Options range from x-small to xx-large, so you can balance it with surrounding content—smaller for inline lists, larger for profile headers.

Primary and Secondary Text

Display additional context alongside the Avatar by adding text fields. Use Primary Text for the most important information (like a full name) and Secondary Text for supporting details (like job title or email).

You can also set font styles for each text level to create visual hierarchy between the primary and secondary information.

Tags

Add visual labels to categorize or highlight information about the Avatar. Tags appear as small badges and can be styled with different colors using the Tag Variant option—useful for showing status, department, role, or any quick identifier.

---

Example Use Cases

User Profiles – Create complete profile headers by combining a custom image with primary text for the user's name and secondary text for their job title or department. This gives portal users a clear, professional representation on their profile pages.

Community Forums – Display Avatars next to posts and comments so community members can quickly identify who's contributing. This adds a personal touch that encourages engagement and makes conversations easier to follow.

Team Pages – Showcase team members with Avatars that include names, roles, and tags for department or expertise. This helps portal users find the right contact and understand team structure at a glance.

---

Specifications

Properties

Name	Description
Initials	Input specific initials to be displayed within the Avatar. It lets you define the representative letters for a user or entity manually
Initials Auto Formatted	This feature auto-generates and displays initials based on a provided full name, ensuring a consistent representation without manual input
Fallback icon name	Determines the backup icon to be shown in the Avatar when primary data (like an image or initials) is absent, ensuring visual continuity
Size	Adjust the overall dimensions of the Avatar to fit within various UI contexts
Variant	Choose between a circular (circle) or a square (square) shape for the Avatar to align with your design preferences
Hide Avatar Details	Toggle to show or conceal additional details associated with the Avatar, such as texts or tags
Primary Text	The main text displayed alongside the Avatar, often used for names or main identifiers
Primary Text Style	Designate the font style for the primary text, choosing from options like Heading 1-4 or Paragraph 1-2
Secondary Text	Additional text displayed below the primary text, suitable for supplementary information or subheadings
Secondary Text Style	Define the font style for the secondary text, with choices ranging from Heading 1-4 to Paragraph 1-2
Tertiary Text	Third-level text, typically used for extra details or attributes related to the Avatar
Tertiary Text Style	Choose the desired font style for the tertiary text, with options including Heading 1-4 and Paragraph 1-2
Text Position	Specify the alignment or positioning of the accompanying texts in relation to the Avatar, allowing for better visual layout
Tags	Set properties for any badge tags associated with the Avatar, providing a way to add categorical markers or indicators to your Avatars

Appareance