> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/building-a-record-detail-page-header.md).

# 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 url="<https://app.arcade.software/share/WSIrtqDu3Qz8KKpXTMmz>" flowId="WSIrtqDu3Qz8KKpXTMmz" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.