# 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](/experience-cloud/experience-components/ax-container.md)
* [Avonni Media Object](/experience-cloud/experience-components/ax-media-object.md)
* [Avonni Avatar](/experience-cloud/experience-components/ax-avatar.md)
* Rich Content Editor

<details>

<summary>Why Use These Components?</summary>

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

</details>

<figure><img src="/files/tP4wDM0GXxPlhRp6HABf" alt=""><figcaption><p>Final Result</p></figcaption></figure>

## Interactive Step-by-Step Configuration Guide

{% @arcade/embed flowId="WSIrtqDu3Qz8KKpXTMmz" url="<https://app.arcade.software/share/WSIrtqDu3Qz8KKpXTMmz>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/building-a-record-detail-page-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.