> 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-profile-card.md).
# AX - Tarjeta de perfil
## Resumen
**AX - Tarjeta de perfil** es un componente de Experience Cloud que muestra información de usuario o contacto en un formato de tarjeta con estilo, con fotos de perfil, nombres, detalles e imágenes de fondo opcionales en páginas de Experience Sites.
Úsalo para mostrar miembros del equipo, contactos de clientes, representantes de socios o colaboradores de la comunidad con un formato visual coherente. Configura qué campos aparecen, añade imágenes de perfil, personaliza el estilo e incluye botones de acción en Experience Builder.
Perfecto para directorios de equipos, listas de contactos, perfiles de miembros de la comunidad, secciones de «Conoce a tu representante» o cualquier lugar donde tu portal necesite mostrar perfiles profesionales.
{% hint style="danger" %}
Este componente [aprovecha slots](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#understanding-slots) para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
{% endhint %}
***
## Primeros pasos
Usa este sencillo tutorial para aprender los fundamentos del componente Profile Card y empezar a construir tus casos de uso.
{% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %}
***
## Tutoriales
| Nombre | Descripción |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| [**Configurando la tarjeta de perfil para mostrar la información del usuario actual**](/experience-cloud/experience-cloud-es/tutoriales/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Configura una tarjeta Avonni para mostrar la información del usuario en Experience Cloud, mejorando la personalización. |
***
## Ranuras
El componente Avonni Profile Card ofrece una forma flexible y dinámica de presentar una amplia gama de información mediante ranuras. Estas ranuras son áreas designadas dentro del componente donde se pueden insertar otros componentes, lo que permite una amplia personalización y funcionalidad.
#### Tipos de ranuras
1. **Ranura de contenido:**
* El área principal para información detallada.
* Ideal para añadir elementos variados como texto, listas, imágenes o componentes personalizados.
* Se puede usar para mostrar datos completos o elementos interactivos.
2. **Ranura de encabezado:**
* Dedicada a títulos, encabezados o contenido introductorio.
* Adecuada para etiquetas de texto, avatares, iconos o cualquier componente que proporcione contexto.
* Mejora la comprensión inmediata del propósito de la Profile Card.
3. **Ranura de acciones:**
* Reservada para elementos interactivos como botones o hipervínculos.
* Facilita la interacción del usuario, ofreciendo acciones como edición de perfiles y navegación.
* Aumenta la interactividad de la tarjeta y la participación del usuario.
***
## Configuración
{% tabs %}
{% tab title="🎛️ Propiedades" %}
| Nombre | Descripción | Uso |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **Título y estilo del texto del título** | Define el título y su apariencia eligiendo entre una variedad de estilos de texto como H1, H2, H3, H4, P1 y P2. | Utiliza esto para darle a tu tarjeta de perfil un encabezado destacado y con estilo que llame la atención. |
| **Subtítulo y estilo del texto del subtítulo** | Añade un subtítulo y personaliza su apariencia, permitiendo información contextual adicional con opciones de estilo. | Usa los subtítulos para proporcionar información adicional, como un puesto o departamento, mejorando la exhaustividad de la tarjeta de perfil. |
| **Fondo del CMS o URL del fondo** | Personaliza el fondo eligiendo una imagen del CMS o proporcionando una URL, lo que permite un fondo visualmente enriquecido. | Una imagen de fondo bien elegida puede aportar profundidad y contexto al perfil, mejorando su atractivo visual. |
| **Imagen de avatar del CMS o URL de la imagen de avatar** | Define el avatar seleccionando una imagen del CMS o usando una URL, lo que permite un toque personal en la representación del perfil. | Los avatares aportan un toque personal, haciendo que el perfil sea más atractivo y cercano. |
| **Variante y tamaño del avatar** | Personaliza la forma y el tamaño del avatar, eligiendo entre variantes como círculo o cuadrado y tamaños que van de x-small a x-large. | Adapta la apariencia del avatar al estilo general de diseño de la tarjeta de perfil, garantizando coherencia visual y atractivo. |
| **Posición del avatar** | Coloca el avatar en la tarjeta, eligiendo ubicaciones como arriba a la izquierda, arriba al centro o abajo a la derecha, entre otras. | Ajusta la posición del avatar para lograr un diseño equilibrado y armonioso dentro de la tarjeta de perfil. |
| {% endtab %} | | |
{% tab title="🎨 Estilo" %}
| Nombre | Descripción | Uso |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Atributos de estilo del encabezado** | Da estilo al encabezado de forma exhaustiva con opciones para color de fondo, color del texto, tamaño de fuente, estilo, grosor e incluso personalización del borde. | Ajusta la apariencia del encabezado para crear un encabezado de tarjeta de perfil visualmente impactante y fácil de leer. |
| **Color de fondo y borde** | Personaliza el color de fondo general de la tarjeta y define propiedades del borde como tamaño, radio y color. | Estas funciones permiten una mayor distinción visual y refinamiento de la apariencia de la tarjeta de perfil, asegurando que se alinee con tus preferencias de diseño. |
| {% endtab %} | | |
| {% endtabs %} | | |
***
## Ejemplos de casos de uso
### Ejemplo 1: Panel destacado de cuenta (contenedor)
{% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %}
Transforma tu sitio de experiencia para socios con una tarjeta de perfil de cuenta pulida y rica en información que coloca los detalles clave de la cuenta, la marca y las acciones en primer plano.
***
#### **Lo que lograrás**
* **Encabezado de marca:** Muestra el nombre y el sector de la cuenta con el logotipo de la empresa para un reconocimiento visual instantáneo
* **Acciones contextuales:** Inicia un flujo de Nueva oportunidad directamente desde la tarjeta con un solo clic
* **Detalle de registro compacto:** Muestra los campos de cuenta más relevantes sin saturar la página
***
#### **Antes de empezar**
* **Campo de logotipo personalizado:** Un campo personalizado en el objeto Cuenta para almacenar la URL del logotipo de la empresa
* **Flujo de pantalla:** Un flujo de pantalla de Nueva oportunidad, listo para iniciarse
* **Componente Button:** Disponible en tu biblioteca de componentes
* **Componente Record Detail:** Disponible en tu biblioteca de componentes
***
#### **Cómo configurarlo**
{% stepper %}
{% step %}
#### **Añade la Profile Card a tu página**
* Arrastra el componente AX – Profile Card a la página de registro de Cuenta de Experience
{% endstep %}
{% step %}
#### **Configura el encabezado de la tarjeta**
* Establece el encabezado en `{!Item.Name}`
* Establece el estilo en `Encabezado 2`
* Establece el subtítulo en `{!Item.Industry}`
{% endstep %}
{% step %}
#### **Añade el logotipo de la empresa**
* Establece la URL de la imagen de avatar en `{!Item.LogoURL__c}`
* Establece la variante en `Círculo`
* Establece el tamaño en `Mediano`
{% endstep %}
{% step %}
#### **Añade un botón de acción personalizado**
* Arrastra el componente Button a la ranura de acciones
{% endstep %}
{% step %}
#### **Añade un diseño compacto de registro**
* Arrastra el componente Record Detail a la ranura de contenido
{% endstep %}
{% step %}
#### **Previsualiza tu página**
* Revisa la tarjeta en modo de vista previa para confirmar que el diseño, el logotipo y el botón de acción aparecen como se espera
{% endstep %}
{% endstepper %}
***
#### **Enlaces**
{% content-ref url="/pages/6a856c7c8b3637fb27d083fcab206f6a975dee64" %}
[AX - Detalle del registro](/experience-cloud/experience-cloud-es/experience-components/ax-record-detail.md)
{% endcontent-ref %}
{% content-ref url="/pages/25027e9377ba221e0f9aded717ff174a91615930" %}
[AX - Botón](/experience-cloud/experience-cloud-es/experience-components/ax-button.md)
{% endcontent-ref %}
***
### Ejemplo 2: Información del perfil del usuario actual
{% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %}
Ofrece a tus usuarios una bienvenida cálida y personalizada en el momento en que llegan a tu sitio de experiencia, creando conexión y fomentando la adopción de la plataforma desde la primera visita.
***
#### **Lo que lograrás**
* **Saludo personalizado:** Dirígete a cada usuario por su nombre con un mensaje de bienvenida dinámico que resulte humano, no genérico
* **Contexto del rol:** Muestra el cargo del usuario debajo de su nombre para que compañeros y clientes puedan entender de inmediato con quién interactúan
* **Foto de perfil:** Recupera automáticamente la foto de perfil del usuario para lograr una sensación pulida y familiar
***
#### **Cómo configurarlo**
{% stepper %}
{% step %}
### **Añade la Profile Card a tu página**
* Arrastra el componente AX – Profile Card a la página del sitio de Experience
{% endstep %}
{% step %}
### **Configura el encabezado de la tarjeta**
* Establece el encabezado en `Bienvenido, {!User.Record.Name}`
* Establece el estilo en `Encabezado 2`
* Establece el subtítulo en `{!User.Record.Title}`
{% endstep %}
{% step %}
### **Configura la imagen de perfil**
* Establece la URL de la imagen de avatar en `{!User.Record.SmallPhotoUrl}`
* Establece la posición del avatar en `Centro superior`
{% endstep %}
{% step %}
### **Previsualiza tu página**
{% endstep %}
{% endstepper %}
***
**Enlaces**
{% content-ref url="/pages/6c6ea281075706e14cb10e32ec4e70d51dfb5219" %}
[AX - Avatar](/experience-cloud/experience-cloud-es/experience-components/ax-avatar.md)
{% endcontent-ref %}
{% content-ref url="/pages/bab88fe5989df834191c3bd0d85330f7dee7cc43" %}
[AX - Sección de acordeón](/experience-cloud/experience-cloud-es/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-es/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.