> 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/experience-components/ax-profile-card.md).
# AX - Carte de profil
## Aperçu
**AX - Carte de profil** est un composant Experience Cloud qui affiche les informations d’un utilisateur ou d’un contact dans une carte stylisée avec des photos de profil, des noms, des détails et des images d’arrière-plan optionnelles sur les pages des sites Experience.
Utilisez-le pour mettre en valeur les membres de l’équipe, les contacts clients, les représentants partenaires ou les contributeurs de la communauté avec un format visuel cohérent. Configurez les champs à afficher, ajoutez des images de profil, personnalisez le style et incluez des boutons d’action dans Experience Builder.
Idéal pour les annuaires d’équipe, les listes de contacts, les profils des membres de la communauté, les sections « Rencontrez votre représentant » ou partout où votre portail a besoin d’affichages de profil professionnels.
{% hint style="danger" %}
Ce composant [utilise des emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-slots) pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.
{% endhint %}
## Prise en main
Utilisez ce tutoriel simple pour apprendre les bases du composant Carte de profil et commencer à construire vos cas d’usage.
{% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %}
## Configuration
### Emplacements
Le composant Avonni Carte de profil offre une manière flexible et dynamique de présenter un large éventail d’informations via des emplacements. Ces emplacements sont des zones dédiées à l’intérieur du composant où d’autres composants peuvent être insérés, ce qui permet une personnalisation et des fonctionnalités étendues.
#### Types d’emplacements
1. **Emplacement de contenu :**
* La zone principale pour les informations détaillées.
* Idéal pour ajouter divers éléments comme du texte, des listes, des images ou des composants personnalisés.
* Peut être utilisé pour afficher des données complètes ou des éléments interactifs.
2. **Emplacement d’en-tête :**
* Réservé aux titres, en-têtes ou contenus d’introduction.
* Convient pour des libellés de texte, des avatars, des icônes ou tout composant qui apporte du contexte.
* Améliore la compréhension immédiate de l’objectif de la Carte de profil.
3. **Emplacement d’actions :**
* Réservé aux éléments interactifs tels que des boutons ou des liens hypertextes.
* Facilite l’interaction utilisateur, en proposant des actions telles que la modification de profils et la navigation.
* Augmente l’interactivité et l’engagement utilisateur de la carte.
### Propriétés
**Titre** et **Sous-titre** définissez l’en-tête de la carte et sa ligne d’accompagnement — utilisez le sous-titre pour fournir un contexte supplémentaire comme un poste ou un service. Leurs styles de texte (H1–H4, P1–P2) se définissent dans l’onglet Style.
**Arrière-plan CMS** et **Source d’arrière-plan** définissez une image d’arrière-plan pour la carte — choisissez une image depuis le CMS ou fournissez une URL pour un fond visuellement enrichi qui ajoute de la profondeur et du contexte.
**Afficher le pied de page** affiche une zone de pied de page sur la carte, et **Marge intérieure du contenu** supprime le rembourrage autour du contenu afin qu’il soit aligné au bord de la carte.
**Image d’avatar CMS** et **URL ou expression de l’image d’avatar** définissez l’image de l’avatar, et **Nom de l’icône de remplacement de l’avatar** définit l’icône affichée lorsqu’aucune image n’est disponible.
**Variante de l’avatar** définit la forme de l’avatar (`cercle` ou `carré`) et **Taille de l’avatar** sa taille (de x-small à x-large).
**Position de l’avatar** place l’avatar sur la carte (en haut à gauche, en haut au centre, en bas à droite, etc.), avec **Position de l’avatar sur les conteneurs petits / moyens / grands** en remplaçant la position par point de rupture.
## Style
{% tabs %}
{% tab title="En-tête" %}
| Nom | Description | Utilisation |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Attributs de style de l’en-tête** | Personnalisez largement l’en-tête avec des options de couleur d’arrière-plan, de couleur de texte, de taille de police, de style, de graisse et même de personnalisation de la bordure. | Affinez l’apparence de l’en-tête pour créer un en-tête de carte de profil visuellement marquant et facilement lisible. |
| {% endtab %} | | |
{% tab title="Arrière-plan et bordure" %}
| Nom | Description | Utilisation |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Couleur d’arrière-plan et bordure** | Personnalisez la couleur d’arrière-plan globale de la carte et définissez les propriétés de la bordure telles que la taille, le rayon et la couleur. | Ces fonctionnalités permettent de mieux distinguer visuellement et de raffiner l’apparence de la carte de profil, en veillant à ce qu’elle corresponde à vos préférences de conception. |
| {% endtab %} | | |
| {% endtabs %} | | |
## Cas d'utilisation
| Nom | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| [**Configuration de la Carte de profil pour afficher les informations de l’utilisateur actuel**](/experience-cloud/experience-cloud-fr/tutoriels/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Configurez une carte Avonni pour afficher les informations de l’utilisateur sur Experience Cloud, afin d’améliorer la personnalisation. |
### Exemple 1 : Panneau de mise en avant d’un compte (conteneur)
{% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %}
Transformez votre site d’expérience partenaire avec une carte de profil de compte soignée et riche en informations qui met les détails clés du compte, la marque et les actions au premier plan.
***
#### **Ce que vous allez accomplir**
* **En-tête de marque :** Affichez le nom du compte et le secteur avec un logo d’entreprise pour une reconnaissance visuelle instantanée
* **Actions contextuelles :** Lancez un flux Nouvelle opportunité directement depuis la carte en un seul clic
* **Détail d’enregistrement compact :** Faites apparaître les champs de compte les plus pertinents sans surcharger la page
***
#### **Avant de commencer**
* **Champ de logo personnalisé :** Un champ personnalisé sur l’objet Compte pour stocker l’URL du logo de l’entreprise
* **Flux d’écran :** Un flux d’écran Nouvelle opportunité, prêt à être lancé
* **Composant Bouton :** Disponible dans votre bibliothèque de composants
* **Composant Détail d’enregistrement :** Disponible dans votre bibliothèque de composants
***
#### **Comment le configurer**
{% stepper %}
{% step %}
#### **Ajoutez la Carte de profil à votre page**
* Faites glisser le composant AX – Carte de profil sur la page d’enregistrement du compte Experience
{% endstep %}
{% step %}
#### **Configurez l’en-tête de la carte**
* Définissez l’en-tête sur `{!Item.Name}`
* Définissez le style sur `Titre 2`
* Définissez le sous-titre sur `{!Item.Industry}`
{% endstep %}
{% step %}
#### **Ajoutez le logo de l’entreprise**
* Définissez l’URL de l’image d’avatar sur `{!Item.LogoURL__c}`
* Définissez la variante sur `Cercle`
* Définissez la taille sur `Moyen`
{% endstep %}
{% step %}
#### **Ajoutez un bouton d’action personnalisé**
* Faites glisser le composant Bouton dans l’emplacement Actions
{% endstep %}
{% step %}
#### **Ajoutez une disposition d’enregistrement compacte**
* Faites glisser le composant Détail d’enregistrement dans l’emplacement Contenu
{% endstep %}
{% step %}
#### **Prévisualiser votre page**
* Vérifiez la carte en mode aperçu pour confirmer que la disposition, le logo et le bouton d’action s’affichent comme prévu
{% endstep %}
{% endstepper %}
***
#### **Liens**
{% content-ref url="/pages/8e893d46776ae1dc01aa1b4b539eaf364fc8f2f9" %}
[AX - Détail d'enregistrement](/experience-cloud/experience-cloud-fr/experience-components/ax-record-detail.md)
{% endcontent-ref %}
{% content-ref url="/pages/08e4667efe4f4a2491715969c74aa78e15d7be12" %}
[AX - Bouton](/experience-cloud/experience-cloud-fr/experience-components/ax-button.md)
{% endcontent-ref %}
***
### Exemple 2 : Informations du profil de l’utilisateur actuel
{% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %}
Offrez à vos utilisateurs un accueil chaleureux et personnalisé dès leur arrivée sur votre site d’expérience, afin de créer du lien et d’encourager l’adoption de la plateforme dès la première visite.
***
#### **Ce que vous allez accomplir**
* **Accueil personnalisé :** Adressez-vous à chaque utilisateur par son nom avec un message de bienvenue dynamique qui paraît humain, et non générique
* **Contexte du rôle :** Affichez le titre de l’utilisateur sous son nom afin que les coéquipiers et les clients comprennent immédiatement avec qui ils interagissent
* **Photo de profil :** Récupérez automatiquement la photo de profil de l’utilisateur pour une impression soignée et familière
***
#### **Comment le configurer**
{% stepper %}
{% step %}
### **Ajoutez la Carte de profil à votre page**
* Faites glisser le composant AX – Carte de profil sur la page du site Experience
{% endstep %}
{% step %}
### **Configurez l’en-tête de la carte**
* Définissez l’en-tête sur `Bienvenue, {!User.Record.Name}`
* Définissez le style sur `Titre 2`
* Définissez le sous-titre sur `{!User.Record.Title}`
{% endstep %}
{% step %}
### **Configurez l’image de profil**
* Définissez l’URL de l’image d’avatar sur `{!User.Record.SmallPhotoUrl}`
* Définissez la position de l’avatar sur `En haut au centre`
{% endstep %}
{% step %}
### **Prévisualiser votre page**
{% endstep %}
{% endstepper %}
***
**Liens**
{% content-ref url="/pages/ddd9c4f6410aaabc7f22e0f983e238eecf8b93c3" %}
[AX - Avatar](/experience-cloud/experience-cloud-fr/experience-components/ax-avatar.md)
{% endcontent-ref %}
{% content-ref url="/pages/e46448b75980540513d85b302f2b4cf9014fa1ec" %}
[AX - Section d'accordéon](/experience-cloud/experience-cloud-fr/experience-components/ax-accordion-section.md)
{% endcontent-ref %}
---
# 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/experience-components/ax-profile-card.md?ask=&goal=
```
`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.