> 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étail 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="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-561f64fa4d68233bcc123293ff898fe1ce704e21%2F2023-11-17_05-54-39.png?alt=media" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.