> 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-avatar.md).
# AX - Avatar
## Aperçu
**AX - Avatar** est un composant Experience Cloud qui affiche des photos de profil, des initiales ou des icônes sur les pages des sites Experience pour représenter des utilisateurs, des contacts, des comptes ou tout enregistrement Salesforce.
Utilisez-le pour afficher les profils des utilisateurs du portail, les représentants de comptes, les listes de contacts ou les identifiants d'entités avec un style visuel cohérent. Le composant affiche automatiquement les images lorsqu'elles sont disponibles ou utilise à défaut des initiales ou des icônes.
Idéal pour les en-têtes de profil utilisateur, les listes de membres de la communauté, les annuaires de contacts ou partout où les utilisateurs du portail ont besoin d'une identification visuelle des personnes ou des entités.
***
## Personnaliser l'Avatar
Le composant Avonni Avatar vous aide à créer des représentations visuellement cohérentes des utilisateurs ou des entités au sein de votre site Salesforce Experience Cloud. Voici un guide étape par étape pour personnaliser l'Avatar selon vos besoins :
### **Affichage des initiales**
Le composant Avatar offre une grande flexibilité dans la manière d'afficher les initiales :
#### **Saisie manuelle**
Si vous connaissez les initiales que vous souhaitez afficher, saisissez-les directement dans le champ « Initiales ».
#### **Génération dynamique (expressions)**
Pour rendre vos composants Avonni dynamiques, vous pouvez utiliser [les expressions Experience Cloud](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#expressions). Par exemple, dans le composant Avatar ci-dessous, vous pouvez utiliser l'expression suivante pour afficher automatiquement le nom de l'utilisateur actuellement connecté :
```
{!User.Record.Name}
```
Vous pouvez remplacer `Nom` par le nom réel du champ qui stocke le nom de l'utilisateur dans votre organisation Salesforce.
Si vous souhaitez générer automatiquement les initiales à partir d'un nom complet, activez l'option « Initiales autoformatées ». Cela utilisera les expressions Experience Cloud pour extraire et mettre en forme la première lettre de chaque mot du nom.
Affichage dynamique des initiales à partir du nom de l'utilisateur actuel
### **Image personnalisée**
Ajoutez une photo de profil, un logo ou toute autre image pour rendre l'Avatar immédiatement reconnaissable. Importez votre image à l'aide de l' **Contenu sélectionné** option — le composant la recadre et la met automatiquement en forme pour l'adapter à la forme de l'Avatar.
Si aucune image n'est ajoutée, l'Avatar affiche des initiales à la place
### **Variante (forme)**
Choisissez entre **circle** ou **square** en utilisant le **Variante** champ pour l'adapter au design de votre portail. Les avatars circulaires conviennent bien aux personnes, tandis que les formes carrées conviennent aux logos ou aux icônes d'entité
### **Taille**
Contrôlez la taille de l'Avatar sur la page à l'aide de la **Taille** propriété. Les options vont de **x-small** sur **xx-large**, afin de l'équilibrer avec le contenu environnant — plus petit pour les listes en ligne, plus grand pour les en-têtes de profil.
### **Texte principal et secondaire**
Affichez un contexte supplémentaire à côté de l'Avatar en ajoutant des champs de texte. Utilisez **Texte principal** pour les informations les plus importantes (comme un nom complet) et **Texte secondaire** pour les détails complémentaires (comme le poste ou l'e-mail).
Vous pouvez également définir des styles de police pour chaque niveau de texte afin de créer une hiérarchie visuelle entre les informations principales et secondaires.
### **Étiquettes**
Ajoutez des étiquettes visuelles pour catégoriser ou mettre en évidence les informations sur l'Avatar. Les tags apparaissent sous forme de petits badges et peuvent être stylisés avec différentes couleurs à l'aide de l' **Variante du tag** option — utile pour afficher un statut, un service, un rôle ou tout identifiant rapide.
***
## **Exemples de cas d'utilisation**
**Profils utilisateur** — Créez des en-têtes de profil complets en combinant une image personnalisée avec un texte principal pour le nom de l'utilisateur et un texte secondaire pour son intitulé de poste ou son service. Cela offre aux utilisateurs du portail une représentation claire et professionnelle sur leurs pages de profil.
**Forums communautaires** — Affichez des avatars à côté des publications et des commentaires afin que les membres de la communauté puissent identifier rapidement qui contribue. Cela ajoute une touche personnelle qui favorise l'engagement et facilite le suivi des conversations.
**Pages d'équipe** — Mettez en avant les membres de l'équipe avec des avatars incluant les noms, les rôles et des tags pour le service ou l'expertise. Cela aide les utilisateurs du portail à trouver le bon contact et à comprendre la structure de l'équipe en un coup d'œil.
***
## Spécifications
{% tabs %}
{% tab title="Propriétés" %}
| Nom | Description |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Initiales** | Saisissez des initiales spécifiques à afficher dans l'Avatar. Cela vous permet de définir manuellement les lettres représentatives d'un utilisateur ou d'une entité |
| **Initiales autoformatées** | Cette fonctionnalité génère et affiche automatiquement des initiales à partir d'un nom complet fourni, garantissant une représentation cohérente sans saisie manuelle |
| **Nom de l'icône de secours** | Détermine l'icône de remplacement à afficher dans l'Avatar lorsque les données principales (comme une image ou des initiales) sont absentes, assurant ainsi la continuité visuelle |
| **Taille** | Ajuste les dimensions globales de l'Avatar pour l'adapter à différents contextes d'interface |
| **Variante** | Choisissez entre une forme circulaire (`circle`) ou une forme carrée (`square`) pour l'Avatar afin de l'aligner sur vos préférences de conception |
| **Masquer les détails de l'Avatar** | Activez ou désactivez l'affichage des détails supplémentaires associés à l'Avatar, tels que les textes ou les tags |
| **Texte principal** | Le texte principal affiché à côté de l'Avatar, souvent utilisé pour les noms ou les principaux identifiants |
| **Style du texte principal** | Définissez le style de police du texte principal, en choisissant parmi des options telles que Titre 1 à 4 ou Paragraphe 1 à 2 |
| **Texte secondaire** | Texte supplémentaire affiché sous le texte principal, adapté aux informations complémentaires ou aux sous-titres |
| **Style du texte secondaire** | Définissez le style de police du texte secondaire, avec des choix allant de Titre 1 à 4 à Paragraphe 1 à 2 |
| **Texte tertiaire** | Texte de troisième niveau, généralement utilisé pour des détails ou des attributs supplémentaires liés à l'Avatar |
| **Style du texte tertiaire** | Choisissez le style de police souhaité pour le texte tertiaire, avec des options incluant Titre 1 à 4 et Paragraphe 1 à 2 |
| **Position du texte** | Spécifiez l'alignement ou le positionnement des textes d'accompagnement par rapport à l'Avatar, afin d'obtenir une meilleure mise en page visuelle |
| **Étiquettes** | Définissez les propriétés de toutes les étiquettes de badge associées à l'Avatar, ce qui permet d'ajouter des marqueurs ou des indicateurs catégoriels à vos avatars |
| {% endtab %} | |
{% tab title="Apparence" %}
| Attribut | Nom de la propriété | Description | Valeurs possibles |
| -------------------- | ------------------------------------------------ | ------------------------------------------------------------------ | ----------------------------------------------------------- |
| **Texte principal** | Couleur du texte principal | Définit la couleur du texte principal dans l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte principal** | Taille de police du texte principal | Modifie la taille du texte principal | Valeurs de taille de police (p. ex. 12px, 1rem) |
| **Texte principal** | Style de police du texte principal | Contrôle le style de police (p. ex. italique, oblique) | Options standard de style de police |
| **Texte principal** | Graisse de police du texte principal | Définit le degré de gras du texte principal | Valeurs de graisse de police (p. ex. normal, gras) |
| **Texte secondaire** | Couleur du texte secondaire | Définit la couleur du texte complémentaire | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte secondaire** | Taille de police du texte secondaire | Modifie la taille du texte secondaire | Valeurs de taille de police (p. ex. 12px, 1rem) |
| **Texte secondaire** | Style de police du texte secondaire | Contrôle le style de police (p. ex. italique, oblique) | Options standard de style de police |
| **Texte secondaire** | Graisse de police du texte secondaire | Définit le degré de gras du texte secondaire | Valeurs de graisse de police (p. ex. normal, gras) |
| **Texte tertiaire** | Couleur du texte tertiaire | Définit la couleur du texte de troisième niveau | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte tertiaire** | Taille de police du texte tertiaire | Modifie la taille du texte tertiaire | Valeurs de taille de police (p. ex. 12px, 1rem) |
| **Texte tertiaire** | Style de police du texte tertiaire | Contrôle le style de police (p. ex. italique, oblique) | Options standard de style de police |
| **Texte tertiaire** | Graisse de police du texte tertiaire | Définit le degré de gras du texte tertiaire | Valeurs de graisse de police (p. ex. normal, gras) |
| **Icône** | Couleur d'arrière-plan de l'icône | Définit la couleur d'arrière-plan de la zone d'icône | Valeurs de couleur standard, classes utilitaires de couleur |
| **Icône** | Couleur de premier plan de l'icône | Définit la couleur de l'image de l'icône ou des initiales | Valeurs de couleur standard, classes utilitaires de couleur |
| **Icône** | Utilitaire de couleur de premier plan de l'icône | Applique un schéma de couleurs prédéfini à l'icône | Noms de classes utilitaires spécifiques |
| **Icône** | Ajustement de l'image de l'icône | Contrôle la façon dont une image d'icône s'adapte à son espace | fill, contain, cover, none, scale-down |
| **Bordure** | Taille de la bordure | Spécifie la largeur de la bordure de l'Avatar | Valeurs en pixels (p. ex. 1px, 2px) |
| **Bordure** | Rayon de bordure | Contrôle l'arrondi des coins de l'Avatar | Valeurs en pixels, % (p. ex. 50 % pour un cercle) |
| **Bordure** | Couleur de la bordure | Définit la couleur de la bordure de l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Bordure** | Style de bordure | Définit l'apparence de la bordure (p. ex. continue, en pointillés) | Styles de bordure CSS standard |
| **Initiales** | Couleur des initiales | Définit la couleur du texte des initiales affichées | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Couleur des initiales au survol | Couleur des initiales lorsque l'Avatar est survolé | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Graisse de police des initiales | Contrôle le degré de gras du texte des initiales | Valeurs de graisse de police (p. ex. normal, gras) |
| **Initiales** | Couleur de l'entité | Couleur d'arrière-plan lorsque des initiales sont générées | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Graisse de police de l'entité | Graisse de police des initiales générées à partir d'une entité | Valeurs de graisse de police (p. ex. normal, gras) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
---
# 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-avatar.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.