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. Initials
Purpose: When an unavailable user image, the Avatar component can quickly display initials to identify individuals.
How to Customize: Use the "Initials" field to input the desired initials. For automatic initial generation based on a full name, toggle the "Initials Auto Formatted" option.
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).
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
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 ( |
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 |
Last updated