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:

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.

Interactive Step-by-Step Configuration Guide

Last updated 1 year ago

Was this helpful?