Building a record detail page header

Overview

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:

• Avonni Container

• Avonni Media Object

• Avonni Avatar

• Rich Content Editor

Why Use These Components?

Avonni Container

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

Final Result

Interactive Step-by-Step Configuration Guide