AX - Tarjeta

Resumen

AX - Tarjeta es un componente de Experience Cloud que muestra contenido en un formato contenido y visualmente estructurado en las páginas de Experience Sites.

Úsalo para presentar información en bloques organizados: como detalles de productos, perfiles de usuario, artículos, recursos o cualquier contenido que se beneficie de una separación visual. Arrastra y suelta cualquier componente de Experience Cloud dentro de la tarjeta para crear su contenido y configura el estilo, los encabezados y los pies de página en Experience Builder.

Perfecto para catálogos de productos, bibliotecas de recursos, perfiles de miembros del equipo, vistas previas de artículos o en cualquier lugar donde el contenido del portal necesite organización y separación visual clara.

Este componente aprovecha los espacios (slots) para la personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.

Configuración de la Avonni Card

Agregar un título a la tarjeta

Da a tu Avonni Card un título claro e informativo para ayudar a los usuarios a identificar rápidamente su contenido. Así es como:

• Encuentra el atributo "Card Title": Esta configuración se encuentra dentro de las opciones de configuración del componente Avonni Card en el generador de tu sitio de Experience Cloud.

• Introduce tu título: Escribe el texto que quieres mostrar como título. Mantenlo conciso y descriptivo.

• Ubicación: El título aparecerá automáticamente en el lado izquierdo de tu Avonni Card, proporcionando un punto de anclaje visual.

Ejemplo:

Si tu Avonni Card muestra información de producto, podrías usar un Título de Tarjeta como "Ubicación".

Mostrar encabezado

Activa el atributo "Mostrar encabezado" para agregar un contenedor versátil en la parte superior derecha de tu Avonni Card. Esto te permite:

• Personalizar el contenido de la tarjeta: Puedes arrastrar y soltar otros componentes, como botones, iconos o texto adicional, directamente en el encabezado.

• Crear diseños flexibles: Organiza elementos dentro del encabezado para lograr el aspecto y la funcionalidad perfectos de tu tarjeta.

Ejemplo: Agregar un botón "Crear nuevo caso" en una página de cuenta de cliente. Al hacer clic en este botón se activaría un cuadro de diálogo de flujo que guía al usuario para enviar un nuevo caso de soporte y recopilar toda la información necesaria.

Mostrar pie de página

Esta opción habilita una sección de pie de página en la parte inferior de tu Avonni Card. Puedes usar el espacio de pie de página proporcionado para añadir contenido como enlaces, botones o texto adicional.

Relleno de separación del contenido

Ajusta el espaciado alrededor del contenido dentro de tu tarjeta. Usa esta configuración para crear un diseño más compacto con el contenido pegado al borde o agregar más espacio de respiración.

Tutoriales

Nombre	Descripción
Creando una vitrina MapCard	Aprende a crear una vitrina MapCard con los componentes Avonni Card y Map

Apariencia

Tamaño

• Ancho: Controla el ancho horizontal de la tarjeta. Puedes usar anchos fijos (píxeles, porcentajes) o permitir que la tarjeta se adapte a su contenido o al tamaño del contenedor.

• Alto: Controla la altura vertical de la tarjeta. Similar al ancho, puedes usar configuraciones de altura fijas o flexibles.

• Desbordamiento: Dicta cómo la tarjeta maneja el contenido que excede sus dimensiones. Las opciones pueden incluir:

  • Visible: El contenido fluye fuera de los límites de la tarjeta.

  • Oculto: El contenido se recorta en los bordes de la tarjeta.

  • Desplazamiento: Agrega barras de desplazamiento a la tarjeta si el contenido se desborda.

Encabezado

• Color de fondo: Establece el color de fondo del área del encabezado de la tarjeta.

• Color del texto: Establece el color de cualquier elemento de texto dentro del encabezado.

• Tamaño de fuente: Controla el tamaño del texto del encabezado.

• Grosor de la fuente: Establece el peso (negrita) del texto del encabezado (por ejemplo, normal, negrita, ligero).

• Familia tipográfica: Especifica la tipografía utilizada para el texto del encabezado.

• Tamaño del borde inferior: Establece el grosor del borde inferior que separa el encabezado del contenido principal de la tarjeta.

• Color del borde inferior: Establece el color del borde inferior en el encabezado.

Medios

• Ancho: Controla el ancho de la sección de medios de la tarjeta (probablemente para imágenes o videos).

• Alto: Controla la altura de la sección de medios de la tarjeta.

• Ajuste del objeto: Determina cómo debe redimensionarse una imagen o video para ajustarse dentro de su contenedor. Las opciones incluyen:

  • Rellenar: Estira el contenido para llenar el espacio, pudiendo distorsionar la relación de aspecto.

  • Contener: Escala el contenido para que quepa completamente dentro del espacio, pudiendo dejar áreas en blanco.

  • Cubrir: Escala el contenido para cubrir todo el espacio, pudiendo recortar.

  • Ninguno: Muestra el contenido en su tamaño original.

  • Reducir escala: El contenido se reduce si excedería las dimensiones del contenedor; de lo contrario se muestra en su tamaño original.

• Tamaño del borde: Controla el grosor del borde alrededor del elemento multimedia.

• Color del borde: Establece el color del borde alrededor del elemento multimedia.

Borde

• Tamaño: Establece el grosor general del borde que rodea toda la tarjeta.

• Radio: Controla qué tan redondeadas son las esquinas de la tarjeta.

• Color: Establece el color del borde de la tarjeta