Avatar

Overview

The Avonni Avatar component displays user or entity images, symbols, or initials within Salesforce. Whether representing a user profile, a contact, or any other entity, the Avatar ensures a consistent and visually appealing representation.

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:

1. 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

2. Custom Image

• Purpose: Adding a custom image enhances personalization and makes the Avatar immediately recognizable. This is ideal for branding, user profiles, or any situation where visual identification is essential.

• How to Customize: Upload your image using the "Selected Content" option. The component will automatically format it to fit within the Avatar.

If you don't add an image, initials will be displayed instead.

3. Variant (Shape)

• Purpose: Choose a circular or square shape to complement your site's design aesthetic.

• How to Customize: Using the "Variant" field, select either "circle" or "square".

4. Size

• Purpose: Adjust the Avatar's size to ensure it visually balances with other elements on your pages.

• How to Customize: Set the "Size" property to any of the following options: x-small, small, medium, large, x-large, xx-large.

5. Primary and Secondary Text

• Purpose: Add information directly alongside the Avatar for further context. Common uses include:

  • Full Name

  • Job Title

  • Email Address

  • Other relevant details

• How to Customize:

  • Use the "Primary Text" field for the most important information.

  • Add additional details in the "Secondary Text" field.

  • Select appropriate font styles for each text level (e.g., Heading, Paragraph).

EXPRESSIONs

6. Tags

• Purpose: Tags offer a quick way to categorize Avatars or add related keywords visually.

• How to Customize: Create Tags linked to the Avatar. Choose a distinctive Tag "Variant" (e.g., color, style) to aid differentiation.

Example Use Cases

• User Profiles: Avatars with custom images, names, and job titles create a clear representation on profile pages.

• Community Forums: Display user Avatars alongside comments to improve engagement and interaction.

• Team Pages: Represent team members using Avatars, including relevant info or tags to aid collaboration.

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

Attribute	Property Name	Description	Possible Values
Primary Text	Primary Text Color	Sets the color of the main text within the Avatar	Standard color values, color utility classes
Primary Text	Primary Text Font Size	Changes the size of the primary text	Font size values (e.g., 12px, 1rem)
Primary Text	Primary Text Font Style	Controls the font style (e.g., italic, oblique)	Standard font style options
Primary Text	Primary Text Font Weight	Defines the boldness of the primary text	Font weight values (e.g., normal, bold)
Secondary Text	Secondary Text Color	Sets the color of the supplementary text	Standard color values, color utility classes
Secondary Text	Secondary Text Font Size	Changes the size of the secondary text	Font size values (e.g., 12px, 1rem)
Secondary Text	Secondary Text Font Style	Controls the font style (e.g., italic, oblique)	Standard font style options
Secondary Text	Secondary Text Font Weight	Defines the boldness of the secondary text	Font weight values (e.g., normal, bold)
Tertiary Text	Tertiary Text Color	Sets the color of the third-level text	Standard color values, color utility classes
Tertiary Text	Tertiary Text Font Size	Changes the size of the tertiary text	Font size values (e.g., 12px, 1rem)
Tertiary Text	Tertiary Text Font Style	Controls the font style (e.g., italic, oblique)	Standard font style options
Tertiary Text	Tertiary Text Font Weight	Defines the boldness of the tertiary text	Font weight values (e.g., normal, bold)
Icon	Icon Background Color	Sets the background color of the icon area	Standard color values, color utility classes
Icon	Icon Foreground Color	Sets the color of the icon image or initials	Standard color values, color utility classes
Icon	Icon Foreground Color Utility	Applies a predefined color scheme to the icon	Specific utility class names
Icon	Icon Image Object Fit	Controls how an icon image fits within its space	fill, contain, cover, none, scale-down
Border	Border Size	Specifies the width of the Avatar's border	Pixel values (e.g., 1px, 2px)
Border	Border Radius	Controls the roundedness of the Avatar's corners	Pixel values, % (e.g., 50% for a circle)
Border	Border Color	Sets the color of the Avatar's border	Standard color values, color utility classes
Border	Border Style	Defines the appearance of the border (e.g., solid, dashed)	Standard CSS border styles
Initials	Initials Color	Sets the text color for the displayed initials	Standard color values, color utility classes
Initials	Initials Color Hover	Color of initials when the Avatar is hovered over	Standard color values, color utility classes
Initials	Initials Font Weight	Controls the boldness of the initials text	Font weight values (e.g., normal, bold)
Initials	Entity Color	Background color when initials are generated	Standard color values, color utility classes
Initials	Entity Font Weight	Font weight of initials generated from an entity	Font weight values (e.g., normal, bold)