> 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-es/experience-components/ax-avatar.md). # AX - Avatar ## Resumen **AX - Avatar** es un componente de Experience Cloud que muestra fotos de perfil, iniciales o iconos en las páginas de Experience Sites para representar usuarios, contactos, cuentas o cualquier registro de Salesforce. Úsalo para mostrar perfiles de usuarios del portal, representantes de cuentas, listas de contactos o identificadores de entidades con un estilo visual coherente. El componente muestra automáticamente imágenes cuando están disponibles o, en su defecto, iniciales o iconos. Perfecto para encabezados de perfil de usuario, listas de miembros de la comunidad, directorios de contactos o cualquier lugar en el que los usuarios del portal necesiten una identificación visual de personas o entidades. *** ## Personalización del Avatar El componente Avonni Avatar te ayuda a crear representaciones visualmente coherentes de usuarios o entidades dentro de tu sitio de Salesforce Experience Cloud. Aquí tienes una guía paso a paso para personalizar el Avatar según tus necesidades: ### **Mostrar iniciales** El componente Avatar ofrece flexibilidad en la forma en que muestras las iniciales: #### **Entrada manual** Si conoces las iniciales que quieres mostrar, introdúcelas directamente en el campo "Initials".
#### **Generación dinámica (expresiones)** Para que tus componentes Avonni sean dinámicos, puedes usar [expresiones de Experience Cloud](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#expressions). Por ejemplo, en el componente Avatar de abajo, puedes usar la siguiente expresión para mostrar automáticamente el nombre del usuario que ha iniciado sesión: ``` {!User.Record.Name} ``` Puedes reemplazar `Nombre` por el nombre real del campo que almacena el nombre del usuario en tu organización de Salesforce. Si deseas generar automáticamente las iniciales a partir de un nombre completo, habilita la opción "Initials Auto Formatted". Esto utilizará expresiones de Experience Cloud para extraer y dar formato a la primera letra de cada palabra del nombre.

Mostrar iniciales dinámicamente a partir del nombre del usuario actual

### **Imagen personalizada** Añade una foto de perfil, un logotipo o cualquier imagen para que el Avatar sea reconocible al instante. Sube tu imagen mediante la **Contenido seleccionado** opción; el componente la recorta y la formatea automáticamente para que encaje en la forma del Avatar. Si no se añade ninguna imagen, el Avatar muestra iniciales en su lugar ### **Variante (forma)** Elige entre **círculo** o **cuadrado** usando el **Variante** campo para adaptarlo al diseño de tu portal. Los avatares circulares funcionan bien para personas, mientras que las formas cuadradas son adecuadas para logotipos o iconos de entidad
### **Tamaño** Controla qué tamaño tiene el Avatar en la página usando la **Tamaño** propiedad. Las opciones van desde **x-small** en **xx-large**, así puedes equilibrarlo con el contenido circundante: más pequeño para listas en línea, más grande para encabezados de perfil. ### **Texto primario y secundario** Muestra contexto adicional junto al Avatar añadiendo campos de texto. Usa **Texto primario** para la información más importante (como un nombre completo) y **Texto secundario** para detalles de apoyo (como el cargo o el correo electrónico). También puedes establecer estilos de fuente para cada nivel de texto para crear una jerarquía visual entre la información primaria y secundaria.
### **Etiquetas** Añade etiquetas visuales para categorizar o resaltar información sobre el Avatar. Las etiquetas aparecen como insignias pequeñas y se pueden estilizar con diferentes colores usando la **Variante de etiqueta** opción, útil para mostrar el estado, el departamento, el rol o cualquier identificador rápido. *** ## **Casos de uso de ejemplo** **Perfiles de usuario** — Crea encabezados de perfil completos combinando una imagen personalizada con texto primario para el nombre del usuario y texto secundario para su cargo o departamento. Esto ofrece a los usuarios del portal una representación clara y profesional en sus páginas de perfil. **Foros de la comunidad** — Muestra avatares junto a las publicaciones y comentarios para que los miembros de la comunidad puedan identificar rápidamente quién está contribuyendo. Esto añade un toque personal que fomenta la participación y hace que las conversaciones sean más fáciles de seguir. **Páginas de equipo** — Muestra a los miembros del equipo con avatares que incluyan nombres, roles y etiquetas de departamento o especialidad. Esto ayuda a los usuarios del portal a encontrar el contacto adecuado y entender la estructura del equipo de un vistazo. *** ## Especificaciones {% tabs %} {% tab title="Propiedades" %} | Nombre | Descripción | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Iniciales** | Introduce las iniciales específicas que se mostrarán dentro del Avatar. Te permite definir manualmente las letras representativas de un usuario o entidad | | **Iniciales formateadas automáticamente** | Esta función genera y muestra automáticamente iniciales basadas en un nombre completo proporcionado, garantizando una representación coherente sin entrada manual | | **Nombre del icono de respaldo** | Determina el icono de respaldo que se mostrará en el Avatar cuando falten los datos principales (como una imagen o iniciales), garantizando la continuidad visual | | **Tamaño** | Ajusta las dimensiones generales del Avatar para adaptarlo a distintos contextos de la interfaz de usuario | | **Variante** | Elige entre una forma circular (`círculo`) o una cuadrada (`cuadrado`) para el Avatar para alinearlo con tus preferencias de diseño | | **Ocultar detalles del Avatar** | Activa o desactiva la visualización de detalles adicionales asociados al Avatar, como textos o etiquetas | | **Texto primario** | El texto principal que se muestra junto al Avatar, a menudo usado para nombres o identificadores principales | | **Estilo del texto primario** | Designa el estilo de fuente para el texto primario, eligiendo entre opciones como Encabezado 1-4 o Párrafo 1-2 | | **Texto secundario** | Texto adicional que se muestra debajo del texto primario, adecuado para información complementaria o subtítulos | | **Estilo del texto secundario** | Define el estilo de fuente para el texto secundario, con opciones que van desde Encabezado 1-4 hasta Párrafo 1-2 | | **Texto terciario** | Texto de tercer nivel, normalmente usado para detalles extra o atributos relacionados con el Avatar | | **Estilo del texto terciario** | Elige el estilo de fuente deseado para el texto terciario, con opciones que incluyen Encabezado 1-4 y Párrafo 1-2 | | **Posición del texto** | Especifica la alineación o el posicionamiento de los textos acompañantes en relación con el Avatar, lo que permite una mejor distribución visual | | **Etiquetas** | Establece propiedades para las etiquetas de insignia asociadas al Avatar, proporcionando una forma de añadir marcadores o indicadores categóricos a tus Avatares | | {% endtab %} | | {% tab title="Apariencia" %} | Atributo | Nombre de la propiedad | Descripción | Valores posibles | | -------------------- | ------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------ | | **Texto primario** | Color del texto primario | Establece el color del texto principal dentro del Avatar | Valores de color estándar, clases utilitarias de color | | **Texto primario** | Tamaño de fuente del texto primario | Cambia el tamaño del texto primario | Valores de tamaño de fuente (p. ej., 12px, 1rem) | | **Texto primario** | Estilo de fuente del texto primario | Controla el estilo de fuente (p. ej., cursiva, oblicua) | Opciones estándar de estilo de fuente | | **Texto primario** | Peso de fuente del texto primario | Define el grosor del texto primario | Valores de peso de fuente (p. ej., normal, negrita) | | **Texto secundario** | Color del texto secundario | Establece el color del texto complementario | Valores de color estándar, clases utilitarias de color | | **Texto secundario** | Tamaño de fuente del texto secundario | Cambia el tamaño del texto secundario | Valores de tamaño de fuente (p. ej., 12px, 1rem) | | **Texto secundario** | Estilo de fuente del texto secundario | Controla el estilo de fuente (p. ej., cursiva, oblicua) | Opciones estándar de estilo de fuente | | **Texto secundario** | Peso de fuente del texto secundario | Define el grosor del texto secundario | Valores de peso de fuente (p. ej., normal, negrita) | | **Texto terciario** | Color del texto terciario | Establece el color del texto de tercer nivel | Valores de color estándar, clases utilitarias de color | | **Texto terciario** | Tamaño de fuente del texto terciario | Cambia el tamaño del texto terciario | Valores de tamaño de fuente (p. ej., 12px, 1rem) | | **Texto terciario** | Estilo de fuente del texto terciario | Controla el estilo de fuente (p. ej., cursiva, oblicua) | Opciones estándar de estilo de fuente | | **Texto terciario** | Peso de fuente del texto terciario | Define el grosor del texto terciario | Valores de peso de fuente (p. ej., normal, negrita) | | **Icono** | Color de fondo del icono | Establece el color de fondo del área del icono | Valores de color estándar, clases utilitarias de color | | **Icono** | Color de primer plano del icono | Establece el color de la imagen del icono o de las iniciales | Valores de color estándar, clases utilitarias de color | | **Icono** | Utilidad de color de primer plano del icono | Aplica un esquema de color predefinido al icono | Nombres específicos de clases utilitarias | | **Icono** | Ajuste del objeto de la imagen del icono | Controla cómo encaja una imagen de icono dentro de su espacio | fill, contain, cover, none, scale-down | | **Borde** | Tamaño del borde | Especifica el ancho del borde del Avatar | Valores en píxeles (p. ej., 1px, 2px) | | **Borde** | Radio del borde | Controla el redondeo de las esquinas del Avatar | Valores en píxeles, % (p. ej., 50% para un círculo) | | **Borde** | Color del borde | Establece el color del borde del Avatar | Valores de color estándar, clases utilitarias de color | | **Borde** | Estilo del borde | Define la apariencia del borde (p. ej., sólido, discontinuo) | Estilos estándar de borde CSS | | **Iniciales** | Color de las iniciales | Establece el color del texto para las iniciales mostradas | Valores de color estándar, clases utilitarias de color | | **Iniciales** | Color de las iniciales al pasar el cursor | Color de las iniciales cuando se pasa el cursor sobre el Avatar | Valores de color estándar, clases utilitarias de color | | **Iniciales** | Peso de fuente de las iniciales | Controla el grosor del texto de las iniciales | Valores de peso de fuente (p. ej., normal, negrita) | | **Iniciales** | Color de la entidad | Color de fondo cuando se generan iniciales | Valores de color estándar, clases utilitarias de color | | **Iniciales** | Peso de fuente de la entidad | Peso de fuente de las iniciales generadas a partir de una entidad | Valores de peso de fuente (p. ej., normal, negrita) | | {% 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-es/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.