> 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/experience-cloud-fr/tutoriels/use-cases/building-a-record-detail-page-header.md).

# Créer un en-tête de page de détails d'enregistrement

## Aperçu

Ce tutoriel va construire un en-tête de page d’enregistrement pour un site Experience Cloud en intégrant divers composants, notamment des types Standard et Avonni. Les composants suivants seront utilisés :

* [Avonni Container](/experience-cloud/experience-cloud-fr/experience-components/ax-container.md)
* [Avonni Media Object](/experience-cloud/experience-cloud-fr/experience-components/ax-media-object.md)
* [Avonni Avatar](/experience-cloud/experience-cloud-fr/experience-components/ax-avatar.md)
* Éditeur de contenu enrichi

<details>

<summary>Pourquoi utiliser ces composants ?</summary>

#### Avonni Container

* **Objectif :** L’Avonni Container servira d’élément fondamental de notre en-tête. Il offre un espace structuré et personnalisable pour tous les autres composants.
* **Pourquoi l’utiliser :** Il est essentiel pour maintenir une mise en page propre et peut être stylé pour correspondre à l’identité visuelle du site, garantissant ainsi un aspect cohérent. Le conteneur regroupera l’objet média, l’avatar et le contenu enrichi en une unité cohérente.

#### Avonni Media Object

* **Objectif :** Ce composant affiche un média à côté d’un bloc de contenu, généralement une image ou une vidéo accompagnée de texte.
* **Pourquoi l’utiliser :** Dans l’en-tête, l’Avonni Media Object peut afficher élégamment une image ou une icône pertinente à côté des informations principales de l’enregistrement, comme une image de produit à côté de sa description. Cette association du média et du contenu améliore l’engagement visuel et fournit immédiatement du contexte aux utilisateurs.

#### Avonni Avatar

* **Objectif :** Avonni Avatar affiche l’image d’un utilisateur ou d’une entité, qui peut représenter une personne, une entreprise ou toute autre entité.
* **Pourquoi l’utiliser :** Dans l’en-tête, l’avatar peut représenter visuellement le sujet de l’enregistrement, par exemple en affichant la photo de profil d’un utilisateur pour un enregistrement de contact. Cela apporte une touche personnelle et rend l’en-tête plus proche et plus attrayant visuellement.

#### Éditeur de contenu enrichi

* **Objectif :** L’Éditeur de contenu enrichi permet de créer et de modifier du texte enrichi, avec diverses options de mise en forme.
* **Pourquoi l’utiliser :** Ce composant peut être utilisé dans l’en-tête pour fournir des informations détaillées sur l’enregistrement de manière mise en forme et conviviale. Il offre une grande flexibilité dans la présentation du texte, qu’il s’agisse d’une brève description, d’informations de contact ou de toute autre donnée pertinente concernant l’enregistrement.

</details>

<figure><img src="/files/4349652501b8e0b7d46242bb780d6bf8d9e0f751" alt=""><figcaption><p>Résultat final</p></figcaption></figure>

## Guide de configuration interactif étape par étape

{% @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/experience-cloud-fr/tutoriels/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.