AX - Profile Card
Overview
AX - Profile Card is an Experience Cloud component that displays user or contact information in a styled card format with profile pictures, names, details, and optional background images on Experience Sites pages.
Use it to showcase team members, customer contacts, partner representatives, or community contributors with consistent visual formatting. Configure which fields appear, add profile images, customize styling, and include action buttons in Experience Builder.
Perfect for team directories, contact lists, community member profiles, "Meet Your Representative" sections, or anywhere your portal needs professional profile displays.
This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
Getting Started
Use this simple tutorial to learn the basics of the Profile Card component and start building your use cases.
Tutorials
Set up an Avonni Card to display user information on Experience Cloud, enhancing personalization.
Slots
The Avonni Profile Card component offers a flexible, dynamic way to present a wide range of information via slots. These slots are designated areas within the component where other components can be inserted, enabling extensive customization and functionality.
Types of Slots
Content Slot:
The primary area for detailed information.
Ideal for adding diverse elements like text, lists, images, or custom components.
Can be used to display comprehensive data or interactive elements.
Header Slot:
Dedicated to titles, headings, or introductory content.
Suitable for text labels, avatars, icons, or any component that provides context.
Enhances the immediate understanding of the Profile Card's purpose.
Actions Slot:
Reserved for interactive elements such as buttons or hyperlinks.
Facilitates user interaction, offering actions such as editing profiles and navigation.
Increases the card's interactivity and user engagement.
Settings
Title and Title Text Style
Define the title and its appearance by choosing from a variety of text styles like H1, H2, H3, H4, P1, and P2.
Utilize this to give your profile card a prominent, stylized heading that captures attention.
Subtitle and Subtitle Text Style
Add a subtitle and customize its appearance, allowing for additional contextual information with style choices.
Use subtitles to provide extra information, like a position or department, enhancing the comprehensiveness of the profile card.
CMS Background or Background URL
Customize the background by choosing an image from the CMS or providing a URL, allowing for a visually enriched backdrop.
A well-chosen background image can add depth and context to the profile, enhancing its visual appeal.
CMS Avatar Image or Avatar Image URL
Define the avatar by selecting an image from the CMS or using a URL, allowing for a personal touch in the profile representation.
Avatars add a personal touch, making the profile more engaging and relatable.
Avatar Variant and Size
Customize the avatar’s shape and size, choosing from variants like circle or square and sizes ranging from x-small to x-large.
Tailor the avatar’s appearance to suit the overall design aesthetic of the profile card, ensuring visual coherence and appeal.
Avatar Position
Position the avatar on the card, choosing locations like top left, top center, or bottom right, among others.
Adjust the avatar's position to achieve a balanced and harmonious layout within the profile card.
Header Styling Attributes
Extensively style the header with options for background color, text color, font size, style, weight, and even border customization.
Fine-tune the header's appearance to create a visually striking and easily readable profile card header.
Background Color and Border
Customize the overall background color of the card and define border properties such as size, radius, and color.
These features allow for further visual distinction and refinement of the profile card's appearance, ensuring it aligns with your design preferences.
Use Case Examples
Example 1: Account Highlight Panel (container)
Transform your partner experience site with a polished, information-rich account profile card that puts key account details, branding, and actions front and center.
What You'll Achieve
Branded header: Display the account name and industry with a company logo for instant visual recognition
Contextual actions: Launch a New Opportunity flow directly from the card with a single click
Compact record detail: Surface the most relevant account fields without overwhelming the page
Before You Begin
Custom logo field: A custom field on the Account object to store the company logo URL
Screen flow: A New Opportunity screen flow, ready to launch
Button component: Available in your component library
Record Detail component: Available in your component library
How to Set It Up
Links
AX - Record DetailAX - ButtonExample 2: Current User profile information
Give your users a warm, personalized welcome the moment they land on your experience site, building connection and encouraging platform adoption from the very first visit.
What You'll Achieve
Personalized greeting: Address each user by name with a dynamic welcome message that feels human, not generic
Role context: Display the user's title beneath their name so teammates and customers can immediately understand who they're interacting with
Profile photo: Pull the user's profile picture automatically for a polished, familiar feel
How to Set It Up
Links
AX - AvatarAX - Accordion SectionLast updated
Was this helpful?