# 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.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbR9Mq0YdqjtlwMO6JdY6%2F2023-11-07_16-05-19.png?alt=media&#x26;token=c95863f1-cc0f-4a60-b93f-58af779f2823" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Este componente [aprovecha los slots](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/aprender-lo-basico#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="<https://app.arcade.software/share/5SMa268wZsjsteVlpI8B>" %}

***

## Tutoriales

| Name                                                                                                                                                                                                                                                                                   | Descripción                                                                                                         |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| [**Configuración de la Tarjeta de perfil para mostrar información del usuario actual**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/componentes/tarjeta-de-perfil/configura-la-tarjeta-de-perfil-para-mostrar-la-informacion-del-usuario-actual) | 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="<https://app.arcade.software/share/SM5nEWQrD61sIelW6FK0>" %}

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="ax-detalle-del-registro" %}
[ax-detalle-del-registro](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-detalle-del-registro)
{% endcontent-ref %}

{% content-ref url="ax-boton" %}
[ax-boton](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-boton)
{% endcontent-ref %}

***

### Ejemplo 2: información de perfil del usuario actual

{% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="<https://app.arcade.software/share/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 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="ax-avatar" %}
[ax-avatar](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-avatar)
{% endcontent-ref %}

{% content-ref url="ax-seccion-de-acordeon" %}
[ax-seccion-de-acordeon](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-seccion-de-acordeon)
{% endcontent-ref %}