# AX - Tarjeta de perfil
## Descripción general
**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 uniforme. Configura qué campos aparecen, agrega 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 de forma profesional.
{% hint style="danger" %}
Este componente [aprovecha los slots](/experience-cloud/experience-cloud-es/primeros-pasos/aprendiendo-lo-basico.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 conceptos básicos del componente Tarjeta de perfil y empezar a crear tus casos de uso.
{% @arcade/embed flowId="5SMa268wZsjsteVlpI8B" url="" %}
***
## Tutoriales
| Name | Descripción |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| [**Configuración de la Tarjeta de perfil para mostrar información del usuario actual**](/experience-cloud/experience-cloud-es/tutoriales/componentes/tarjeta-de-perfil/configurar-la-tarjeta-de-perfil-para-mostrar-la-informacion-del-usuario-actual.md) | Configura una tarjeta Avonni para mostrar información de usuario en Experience Cloud, mejorando la personalización. |
***
## Slots
El componente Avonni Tarjeta de perfil ofrece una forma flexible y dinámica de presentar una amplia variedad de información mediante slots. Estos slots son áreas designadas dentro del componente donde se pueden insertar otros componentes, lo que permite una amplia personalización y funcionalidad.
#### Tipos de slots
1. **Slot de contenido:**
* El área principal para información detallada.
* Ideal para añadir elementos diversos como texto, listas, imágenes o componentes personalizados.
* Puede usarse para mostrar datos completos o elementos interactivos.
2. **Slot de encabezado:**
* Dedicado a títulos, encabezados o contenido introductorio.
* Adecuado para etiquetas de texto, avatares, iconos o cualquier componente que proporcione contexto.
* Mejora la comprensión inmediata del propósito de la Tarjeta de perfil.
3. **Slot de acciones:**
* Reservado para elementos interactivos como botones o hipervínculos.
* Facilita la interacción del usuario, ofreciendo acciones como la edición de perfiles y la navegación.
* Aumenta la interactividad de la tarjeta y la participación del usuario.
***
## Configuración
{% tabs %}
{% tab title="🎛️ Propiedades" %}
| Name | 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. | Utilízalo 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 subtítulos para proporcionar información extra, como un puesto o departamento, mejorando la exhaustividad de la tarjeta de perfil. |
| **Fondo de CMS o URL de 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 de CMS o URL de 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 el perfil 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 extra pequeño a extra grande. | Adapta la apariencia del avatar al diseño general estético 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" %}
| Name | Descripción | Uso |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Atributos de estilo del encabezado** | Da estilo al encabezado en gran medida 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 ajuste a tus preferencias de diseño. |
{% endtab %}
{% endtabs %}
***
## Ejemplos de casos de uso
### Ejemplo 1: Panel destacado de cuenta (contenedor)
{% @arcade/embed flowId="SM5nEWQrD61sIelW6FK0" url="" %}
Transforma tu sitio de experiencia para socios con una tarjeta de perfil de cuenta pulida y rica en información que sitúa los detalles clave de la cuenta, la marca y las acciones en primer plano.
***
#### **Lo que lograrás**
* **Encabezado con marca:** Muestra el nombre de la cuenta y el sector con un 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 compacto del registro:** Muestra los campos de cuenta más relevantes sin saturar la página
***
#### **Antes de comenzar**
* **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 iniciar
* **Componente de botón:** Disponible en tu biblioteca de componentes
* **Componente de detalle del registro:** Disponible en tu biblioteca de componentes
***
#### **Cómo configurarlo**
{% stepper %}
{% step %}
#### **Añade la Tarjeta de perfil a tu página**
* Arrastra el componente AX – Tarjeta de perfil a la página de registro de Cuenta de Experience
{% endstep %}
{% step %}
#### **Configura el encabezado de la tarjeta**
* Establece Encabezado en `{!Item.Name}`
* Establece Estilo en `Encabezado 2`
* Establece 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 Variante en `Círculo`
* Establece Tamaño en `Mediano`
{% endstep %}
{% step %}
#### **Añade un botón de acción personalizado**
* Arrastra el componente Botón al slot de Acciones
{% endstep %}
{% step %}
#### **Añade un diseño compacto de registro**
* Arrastra el componente Detalle del registro al slot 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 aparezcan como se espera
{% endstep %}
{% endstepper %}
***
#### **Enlaces**
{% content-ref url="/pages/6a856c7c8b3637fb27d083fcab206f6a975dee64" %}
[AX - Detalle del registro](/experience-cloud/experience-cloud-es/experience-components/ax-detalle-del-registro.md)
{% endcontent-ref %}
{% content-ref url="/pages/25027e9377ba221e0f9aded717ff174a91615930" %}
[AX - Botón](/experience-cloud/experience-cloud-es/experience-components/ax-boton.md)
{% endcontent-ref %}
***
### Ejemplo 2: información de perfil del usuario actual
{% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="" %}
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 se sienta 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 están interactuando
* **Foto de perfil:** Obtén automáticamente la foto de perfil del usuario para darle un aspecto pulido y familiar
***
#### **Cómo configurarlo**
{% stepper %}
{% step %}
### **Añade la Tarjeta de perfil a tu página**
* Arrastra el componente AX – Tarjeta de perfil a la página del sitio de Experience
{% endstep %}
{% step %}
### **Configura el encabezado de la tarjeta**
* Establece Encabezado en `Bienvenido, {!User.Record.Name}`
* Establece Estilo en `Encabezado 2`
* Establece 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 `Arriba al centro`
{% 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-seccion-de-acordeon.md)
{% endcontent-ref %}
---
# Agent Instructions: 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:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-tarjeta-de-perfil.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.