> 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 Experience Sites pour représenter des utilisateurs, des contacts, des comptes ou tout enregistrement Salesforce.
Utilisez-le pour afficher des profils d'utilisateurs du portail, des représentants de compte, des listes de contacts ou des identifiants d'entité avec une mise en forme visuelle cohérente. Le composant affiche automatiquement les images lorsqu'elles sont disponibles ou se rabat sur 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.
## Configuration
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 de la flexibilité dans la façon 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 de champ réel stockant le nom de l'utilisateur dans votre organisation Salesforce.
Si vous souhaitez générer automatiquement des initiales à partir d'un nom complet, activez l'option « Initiales formatées automatiquement ». Cela utilisera des 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 image pour rendre l'Avatar immédiatement reconnaissable. Téléchargez votre image en utilisant 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 **cercle** ou **carré** 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 affichée sur la page à l'aide de la **Taille** propriété. Les options vont de **très petite** sur **xx-large**pour que vous puissiez 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 titre du 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 libellés visuels pour catégoriser ou mettre en évidence des informations sur l'Avatar. Les étiquettes apparaissent sous forme de petits badges et peuvent être stylées avec différentes couleurs à l'aide de la **Variante de l'étiquette** option — utile pour afficher le statut, le service, le rôle ou tout identifiant rapide.
### Propriétés
**Initiales** affiche des initiales spécifiques pour un utilisateur ou une entité, et **Initiales formatées automatiquement** les génère automatiquement à partir d'un nom complet fourni pour une représentation cohérente sans saisie manuelle.
**Nom de l'icône de secours** définit l'icône de secours affichée lorsque les données principales (une image ou des initiales) sont absentes, garantissant une continuité visuelle.
**Image CMS** et **URL de l’image ou expression** définissez l'image de l'avatar — référencez un asset géré par le CMS ou fournissez une URL/une expression. **Href** transforme l'avatar en lien vers l'adresse indiquée.
**Variante** choisit une forme circulaire (`cercle`) ou carrée (`carré`) et **Taille** ajuste les dimensions globales (de x-small à xx-large). **Position de l'icône** aligne l'icône de secours dans l'avatar (`début`, `au centre`, `fin`).
**Texte principal**, **Texte secondaire**, et **Texte tertiaire** affiche le texte principal, complémentaire et de troisième niveau à côté de l'avatar (souvent un nom, puis un rôle, puis un détail supplémentaire) ; leurs styles de texte (Titre 1–4 ou Paragraphe 1–2) se définissent dans l'onglet Style. **Position du texte** spécifie l'alignement de ces textes par rapport à l'avatar (`à gauche`, `au centre`, `à droite`).
**Masquer les détails de l'avatar** affiche ou masque les détails supplémentaires associés à l'avatar, tels que du texte ou des étiquettes.
**Étiquettes** ajoutez des badges à l'avatar comme marqueurs ou indicateurs de catégorie.
**Nom de l'icône d'entité**, **Initiales de l'entité**, **Source de l'image de l'entité**, **Variante de l'entité**, et **Position de l'entité** configurez un badge secondaire « entité » superposé sur l'avatar — son icône, ses initiales, son image, sa forme (`cercle`/`carré`) et sa position dans le coin.
**Actions** ajoutez des boutons d'action à l'avatar, et **Lien vers** définit une interaction déclenchée lorsque l'avatar est cliqué.
## 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 titre de poste ou son service. Cela donne 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 rapidement identifier qui contribue. Cela ajoute une touche personnelle qui encourage l'engagement et rend les conversations plus faciles à suivre.
**Pages d'équipe** – Mettez en valeur les membres de l'équipe avec des avatars comprenant les noms, les rôles et des étiquettes 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.
## Style
{% tabs %}
{% tab title="Texte principal" %}
| Nom de la propriété | Description | Valeurs possibles |
| ---------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
| **Couleur du texte principal** | Définit la couleur du texte principal dans l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Taille de police du texte principal** | Modifie la taille du texte principal | Valeurs de taille de police (p. ex., 12px, 1rem) |
| **Style de police du texte principal** | Contrôle le style de police (p. ex., italique, oblique) | Options standard de style de police |
| **Graisse de police du texte principal** | Définit l'épaisseur du texte principal | Valeurs de graisse de police (p. ex., normal, gras) |
| {% endtab %} | | |
{% tab title="Texte secondaire" %}
| Nom de la propriété | Description | Valeurs possibles |
| ----------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
| **Couleur du texte secondaire** | Définit la couleur du texte complémentaire | Valeurs de couleur standard, classes utilitaires de couleur |
| **Taille de police du texte secondaire** | Modifie la taille du texte secondaire | Valeurs de taille de police (p. ex., 12px, 1rem) |
| **Style de police du texte secondaire** | Contrôle le style de police (p. ex., italique, oblique) | Options standard de style de police |
| **Graisse de police du texte secondaire** | Définit l'épaisseur du texte secondaire | Valeurs de graisse de police (p. ex., normal, gras) |
| {% endtab %} | | |
{% tab title="Texte tertiaire" %}
| Nom de la propriété | Description | Valeurs possibles |
| ---------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
| **Couleur du texte tertiaire** | Définit la couleur du texte de troisième niveau | Valeurs de couleur standard, classes utilitaires de couleur |
| **Taille de police du texte tertiaire** | Modifie la taille du texte tertiaire | Valeurs de taille de police (p. ex., 12px, 1rem) |
| **Style de police du texte tertiaire** | Contrôle le style de police (p. ex., italique, oblique) | Options standard de style de police |
| **Graisse de police du texte tertiaire** | Définit l'épaisseur du texte tertiaire | Valeurs de graisse de police (p. ex., normal, gras) |
| {% endtab %} | | |
{% tab title="Icône" %}
| Nom de la propriété | Description | Valeurs possibles |
| ---------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------- |
| **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 |
| **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 |
| **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 |
| **Ajustement de l'objet 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 |
| {% endtab %} | | |
{% tab title="Bordure" %}
| Nom de la propriété | Description | Valeurs possibles |
| ------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| **Taille de la bordure** | Spécifie la largeur de la bordure de l'Avatar | Valeurs en pixels (p. ex., 1px, 2px) |
| **Rayon de bordure** | Contrôle l'arrondi des coins de l'Avatar | Valeurs en pixels, % (p. ex., 50 % pour un cercle) |
| **Couleur de la bordure** | Définit la couleur de la bordure de l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Style de bordure** | Définit l'apparence de la bordure (p. ex., plein, pointillé) | Styles de bordure CSS standard |
| {% endtab %} | | |
{% tab title="Initiales" %}
| Nom de la propriété | Description | Valeurs possibles |
| ----------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------- |
| **Couleur des initiales** | Définit la couleur du texte des initiales affichées | Valeurs de couleur standard, classes utilitaires de couleur |
| **Couleur des initiales au survol** | Couleur des initiales lorsque l'Avatar est survolé | Valeurs de couleur standard, classes utilitaires de couleur |
| **Graisse de police des initiales** | Contrôle l'épaisseur du texte des initiales | Valeurs de graisse de police (p. ex., normal, gras) |
| **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 |
| **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.
