This tutorial will construct a record page header for an Experience Cloud site by integrating various components, including both Standard and Avonni types. The following components will be used:
Purpose: The Avonni Container will act as the foundational element of our header. It provides a structured and customizable space for all other components.
Why Use It: It’s essential for maintaining a clean layout and can be styled to align with the site’s branding, ensuring a consistent look and feel. The container will encapsulate the media object, avatar, and rich content in a cohesive unit.
Avonni Media Object
Purpose: This component displays media next to a content block, typically an image or video alongside text.
Why Use It: In the header, the Avonni Media Object can elegantly display a relevant image or icon next to the record's primary information, such as a product image next to its description. This pairing of media with content enhances visual engagement and provides immediate context to the users.
Avonni Avatar
Purpose: Avonni Avatar displays a user or entity image, which can represent a person, a company, or any other entity.
Why Use It: In the header, the avatar can visually represent the record’s subject, such as showing a user profile picture for a contact record. It adds a personal touch and makes the header more relatable and visually appealing.
Rich Content Editor
Purpose: The Rich Content Editor allows for creating and editing rich text content, including various formatting options.
Why Use It: This component can be used in the header to provide detailed information about the record in a formatted and user-friendly manner. It offers flexibility in how the text is presented, whether a brief description, contact information, or any other relevant data about the record.
