> 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-card.md). # 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. Úselo para presentar información en bloques organizados, como detalles de productos, perfiles de usuarios, artículos, recursos o cualquier contenido que se beneficie de una separación visual. Arrastre y suelte cualquier componente de Experience Cloud dentro de la tarjeta para construir su contenido y configure 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 cualquier lugar donde el contenido del portal necesite una organización y separación visual claras. {% 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 %}
## Configuración de la Avonni Card ### Añadir un título a la tarjeta Asigne a su Avonni Card un título claro e informativo para ayudar a los usuarios a identificar rápidamente su contenido. Así es como: * **Busque el atributo "Card Title":** Este ajuste se encuentra dentro de las opciones de configuración del componente Avonni Card en el generador de su sitio de Experience Cloud. * **Introduzca su título:** Escriba el texto que desea mostrar como título. Manténgalo conciso y descriptivo. * **Ubicación:** El título aparecerá automáticamente en el lado izquierdo de su Avonni Card, proporcionando un punto de anclaje visual. **Ejemplo:** Si su Avonni Card muestra información de productos, podría usar un título de tarjeta como "Ubicación". ### Mostrar encabezado Active el atributo "Show Header" para añadir un contenedor versátil en la parte superior derecha de su Avonni Card. Esto le permite: * **Personalizar el contenido de la tarjeta:** Puede arrastrar y soltar otros componentes, como botones, iconos o texto adicional, directamente en el encabezado. * **Crear diseños flexibles:** Organice los elementos dentro del encabezado para lograr el aspecto y la funcionalidad perfectos de su tarjeta. **Ejemplo:** Añada 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 diálogo de flujo que guiarí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 su Avonni Card. Puede usar el slot de pie de página proporcionado para añadir contenido como enlaces, botones o texto adicional. ### Relleno del contenido Ajuste el espaciado alrededor del contenido dentro de su tarjeta. Use esta configuración para crear un diseño más compacto, con el contenido alineado con el borde, o añadir más espacio. ## Tutoriales | Nombre | Descripción | | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | [**Creación de una demostración de MapCard**](/experience-cloud/experience-cloud-es/tutoriales/components/card/creating-a-mapcard-showcase.md) | Aprenda a crear una demostración de MapCard con los componentes Avonni Card y Map | ## Apariencia ### **Tamaño** * **Anchura:** Controla la anchura horizontal de la tarjeta. Puede usar anchuras fijas (píxeles, porcentajes) o permitir que la tarjeta se adapte al tamaño de su contenido o contenedor. * **Altura:** Controla la altura vertical de la tarjeta. Similar a la anchura, puede usar configuraciones de altura fijas o flexibles. * **Desbordamiento:** Determina cómo gestiona la tarjeta el contenido que supera sus dimensiones. Las opciones pueden incluir: * **Visible:** El contenido se extiende fuera de los límites de la tarjeta. * **Oculto:** El contenido se recorta en los bordes de la tarjeta. * **Desplazamiento:** Añade 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 fuente:** Establece el grosor del texto del encabezado (p. ej., 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** * **Anchura:** Controla la anchura de la sección multimedia de la tarjeta (probablemente para imágenes o vídeos). * **Altura:** Controla la altura de la sección multimedia de la tarjeta. * **Ajuste del objeto:** Determina cómo se debe redimensionar una imagen o vídeo para ajustarse a su contenedor. Las opciones incluyen: * **Rellenar:** Estira el contenido para llenar el espacio, lo que puede distorsionar la relación de aspecto. * **Contener:** Escala el contenido para que quepa completamente en el espacio, lo que podría dejar áreas en blanco. * **Cubrir:** Escala el contenido para cubrir todo el espacio, lo que podría recortarlo. * **Ninguno:** Muestra el contenido en su tamaño original. * **Reducir:** 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 total del borde que rodea toda la tarjeta. * **Radio:** Controla lo redondeadas que son las esquinas de la tarjeta. * **Color:** Establece el color del borde de la tarjeta --- # 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-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.