> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-avatar.md). # 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. ## Configuration 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](/experience-cloud/getting-started/learning-the-basics.md#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 **Square** (the default) and **Circle** 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** through **Small**, **Medium** (the default), **Large** and **X-Large** 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. Each tag has a **Label** and a **Variant** that colors the badge — `Alt Inverse`, `Base`, `Brand`, `Error`, `Info`, `Inverse`, `Offline`, `Success` or `Warning` — useful for showing status, department, role, or any quick identifier. ### Properties **Initials** displays specific initials for a user or entity, and **Initials Auto Formatted** auto-generates them from a provided full name for a consistent representation without manual input. **Fallback Icon Name** sets the backup icon shown when primary data (an image or initials) is absent, ensuring visual continuity. It defaults to `standard:account`. **CMS Image** and **Image URL or Expression** set the avatar's image — reference a CMS-managed asset or provide a URL/expression. **Href** turns the avatar into a link to the given address. **Variant** chooses a `Square` (default) or `Circle` shape, and **Size** adjusts the overall dimensions (`X-Small`, `Small`, `Medium` (default), `Large`, `X-Large`, `XX-Large`). **Icon Position** aligns the fallback icon within the avatar (`Start`, `Center` (default), `End`). **Primary Text**, **Secondary Text**, and **Tertiary Text** display the main, supplementary, and third-level text alongside the avatar (often a name, then a role, then an extra detail). Each has its own **Text Style** setting directly beneath it in the panel — `Heading 1` to `Heading 4`, or `Paragraph 1` / `Paragraph 2`. **Text Position** specifies the alignment of those texts relative to the avatar (`Left`, `Center`, `Right` (default)). **Hide Avatar Details** shows or conceals the additional details associated with the avatar, such as texts or tags. **Tags** add badge tags to the avatar as categorical markers or indicators. **Entity Icon Name**, **Entity Initials**, **Entity Image Source**, **Entity Variant**, and **Entity Position** configure a secondary "entity" badge overlaid on the avatar — its icon, initials, image, shape (`Square`, the default, or `Circle`), and corner position (`Top Left` (default), `Top Right`, `Bottom Left`, `Bottom Right`). **Actions** add action buttons to the avatar — each with a label, icon, name, and a click interaction — plus a menu icon and a menu position (`Bottom Left`, `Bottom Right`, `Top Left`, `Top Right`) used once there is more than one action. **Link To** defines an interaction triggered when the avatar is clicked. ## 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. ## Styling {% tabs %} {% tab title="Primary Text" %} | Property Name | Description | Possible Values | | ---------------------------- | ------------------------------------------------- | -------------------------------------------- | | **Primary Text Color** | Sets the color of the main text within the Avatar | Standard color values, color utility classes | | **Primary Text Font Size** | Changes the size of the primary text | Font size values (e.g., 12px, 1rem) | | **Primary Text Font Style** | Controls the font style (e.g., italic, oblique) | Standard font style options | | **Primary Text Font Weight** | Defines the boldness of the primary text | Font weight values (e.g., normal, bold) | | {% endtab %} | | | {% tab title="Secondary Text" %} | Property Name | Description | Possible Values | | ------------------------------ | ----------------------------------------------- | -------------------------------------------- | | **Secondary Text Color** | Sets the color of the supplementary text | Standard color values, color utility classes | | **Secondary Text Font Size** | Changes the size of the secondary text | Font size values (e.g., 12px, 1rem) | | **Secondary Text Font Style** | Controls the font style (e.g., italic, oblique) | Standard font style options | | **Secondary Text Font Weight** | Defines the boldness of the secondary text | Font weight values (e.g., normal, bold) | | {% endtab %} | | | {% tab title="Tertiary Text" %} | Property Name | Description | Possible Values | | ----------------------------- | ----------------------------------------------- | -------------------------------------------- | | **Tertiary Text Color** | Sets the color of the third-level text | Standard color values, color utility classes | | **Tertiary Text Font Size** | Changes the size of the tertiary text | Font size values (e.g., 12px, 1rem) | | **Tertiary Text Font Style** | Controls the font style (e.g., italic, oblique) | Standard font style options | | **Tertiary Text Font Weight** | Defines the boldness of the tertiary text | Font weight values (e.g., normal, bold) | | {% endtab %} | | | {% tab title="Icon" %} | Property Name | Description | Possible Values | | --------------------------------- | ------------------------------------------------ | -------------------------------------------- | | **Icon Background Color** | Sets the background color of the icon area | Standard color values, color utility classes | | **Icon Foreground Color** | Sets the color of the icon image or initials | Standard color values, color utility classes | | **Icon Foreground Color Utility** | Applies a predefined color scheme to the icon | Specific utility class names | | **Icon Image Object Fit** | Controls how an icon image fits within its space | fill, contain, cover, none, scale-down | | {% endtab %} | | | {% tab title="Border" %} | Property Name | Description | Possible Values | | ----------------- | ---------------------------------------------------------- | -------------------------------------------- | | **Border Size** | Specifies the width of the Avatar's border | Pixel values (e.g., 1px, 2px) | | **Border Radius** | Controls the roundedness of the Avatar's corners | Pixel values, % (e.g., 50% for a circle) | | **Border Color** | Sets the color of the Avatar's border | Standard color values, color utility classes | | **Border Style** | Defines the appearance of the border (e.g., solid, dashed) | Standard CSS border styles | | {% endtab %} | | | {% tab title="Initials" %} | Property Name | Description | Possible Values | | ------------------------ | ------------------------------------------------- | -------------------------------------------- | | **Initials Color** | Sets the text color for the displayed initials | Standard color values, color utility classes | | **Initials Color Hover** | Color of initials when the Avatar is hovered over | Standard color values, color utility classes | | **Initials Font Weight** | Controls the boldness of the initials text | Font weight values (e.g., normal, bold) | | **Entity Color** | Background color when initials are generated | Standard color values, color utility classes | | **Entity Font Weight** | Font weight of initials generated from an entity | Font weight values (e.g., normal, bold) | | {% endtab %} | | | | {% endtabs %} | | | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-avatar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.