Profile Card

Overview

The Avonni Profile Card is designed to create sophisticated and visually engaging profile cards. With the flexibility to configure titles, subtitles, avatars, backgrounds, and an array of styling attributes, the Profile Card Component is your pathway to creating profile cards that resonate with elegance, professionalism, and visual harmony.

This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.

Tutorials

Name	Description
Configuring the Profile Card to display current user information	Set up an Avonni Card to display user information on Experience Cloud, enhancing personalization.

Slots

The Avonni Profile Card component offers a flexible and dynamic way to present a wide range of information through slots. These slots are designated areas within the component where various other components can be inserted, allowing for extensive customization and functionality.

Types of Slots

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

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

3. Actions Slot:

   • Reserved for interactive elements such as buttons or hyperlinks.

   • Facilitates user interaction, offering actions like editing profiles or navigation.

   • Increases the card's interactivity and user engagement.

Settings

🎛️ Properties

Name	Description	Usage
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.

🎨 Styling

Name	Description	Usage
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.