> 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
## Vue d'ensemble
**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 photos de profil, noms, détails et images d'arrière-plan facultatives 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 une mise en forme visuelle cohérente. Configurez les champs à afficher, ajoutez des images de profil, personnalisez le style et incluez des boutons d'action dans Experience Builder.
Parfait 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 slots](/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 à créer vos cas d'utilisation.
{% @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ésignées à l'intérieur du composant dans lesquelles d'autres composants peuvent être insérés, permettant 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 :**
* Dédié aux titres, aux en-têtes ou au contenu d'introduction.
* Convient aux libellés de texte, aux avatars, aux icônes ou à tout composant qui fournit 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 hypertexte.
* Facilite l'interaction utilisateur, en offrant des actions telles que la modification des profils et la navigation.
* Augmente l'interactivité de la carte et l'engagement des utilisateurs.
### Propriétés
**Titre** et **Sous-titre** définissez l'en-tête de la carte et la ligne d'appui — utilisez le sous-titre pour fournir un contexte supplémentaire comme un poste ou un service. **Style du texte du titre** et **Style du texte du sous-titre** placez-les à côté dans le panneau et définissez la typographie de chaque ligne : `Titre 1` à `Titre 4`, ou `Paragraphe 1` / `Paragraphe 2`.
**Arrière-plan CMS** et **Source de l'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 arrière-plan 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 **Espacement interne du contenu** supprime l'espacement interne autour du contenu afin qu'il soit aligné aux bords de la carte.
**Image d'avatar CMS** et **URL ou expression de l'image d'avatar** définissez l'image d'avatar, et **Nom de l'icône de secours de l'avatar** définit l'icône affichée lorsqu'aucune image n'est disponible.
**Variante d'avatar** définit la forme de l'avatar (`Carré` ou `Cercle`, la valeur par défaut) et **Taille de l'avatar** sa taille (`Très petit`, `Petit`, `Moyen` (par défaut), `Grand` ou `Très grand`).
**Position de l'avatar** place l'avatar sur la carte — `En haut à gauche` (par défaut), `En haut au centre`, `En haut à droite`, `En bas à gauche`, `En bas au centre`, `En bas à droite`, `Gauche`, `Centre` ou `Droite` — avec **Position de l'avatar dans les conteneurs petits / moyens / grands** en remplaçant la position pour chaque point de rupture.
## Style
{% tabs %}
{% tab title="En-tête" %}
| Name | Description | Utilisation |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| **Attributs de style de l'en-tête** | Stylisez l'en-tête en profondeur avec des options de couleur d'arrière-plan, couleur du texte, taille de police, style, graisse, et même personnalisation de la bordure. | Ajustez finement l'apparence de l'en-tête pour créer un en-tête de carte de profil visuellement saisissant et facile à lire. |
| {% endtab %} | | |
{% tab title="Arrière-plan et bordure" %}
| Name | Description | Utilisation |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Couleur d'arrière-plan et bordure** | Personnalisez la couleur d'arrière-plan globale de la carte et définissez des propriétés de bordure telles que la taille, le rayon et la couleur. | Ces fonctionnalités permettent d'ajouter davantage de distinction visuelle et d'affiner l'apparence de la carte de profil, garantissant qu'elle s'aligne sur vos préférences de conception. |
| {% endtab %} | | |
| {% endtabs %} | | |
## Cas d'utilisation
| Name | 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 valeur du 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 au premier plan les détails clés du compte, l'image de marque et les actions.
***
#### **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 :** Affichez 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 de l'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 d'actions
{% endstep %}
{% step %}
#### **Ajoutez une disposition d'enregistrement compacte**
* Faites glisser le composant Détail de l'enregistrement dans l'emplacement de contenu
{% endstep %}
{% step %}
#### **Prévisualisez votre page**
* Vérifiez la carte en mode aperçu pour confirmer que la disposition, le logo et le bouton d'action apparaissent comme prévu
{% endstep %}
{% endstepper %}
***
#### **Liens**
{% content-ref url="/pages/8e893d46776ae1dc01aa1b4b539eaf364fc8f2f9" %}
[AX - Détail de l’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 de 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, en créant un lien et en encourageant 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 d'accueil 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évisualisez 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 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/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 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.
