> 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-de/experience-components/ax-card.md). # AX - Karte ## Übersicht **AX - Karte** ist eine Experience Cloud-Komponente, die Inhalte in einem begrenzten, visuell strukturierten Format auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Informationen in geordneten Blöcken darzustellen – etwa Produktdetails, Benutzerprofile, Artikel, Ressourcen oder jeden anderen Inhalt, der von einer visuellen Trennung profitiert. Ziehen Sie beliebige Experience-Cloud-Komponenten per Drag-and-drop in die Karte, um deren Inhalt zu erstellen, und konfigurieren Sie in Experience Builder Stile, Kopf- und Fußzeilen. Perfekt für Produktkataloge, Ressourcenbibliotheken, Teammitglieder-Profile, Artikelvorschauen oder überall dort, wo Portal-Inhalte eine klare visuelle Organisation und Trennung benötigen. {% hint style="danger" %} Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht. {% endhint %}
## Konfiguration der Avonni Card ### Einen Kartentitel hinzufügen Geben Sie Ihrer Avonni Card einen klaren und aussagekräftigen Titel, damit Benutzer den Inhalt schnell erkennen können. So geht's: * **Suchen Sie das Attribut "Card Title":** Diese Einstellung befindet sich in den Konfigurationsoptionen der Avonni-Card-Komponente in Ihrem Experience-Cloud-Site-Builder. * **Geben Sie Ihren Titel ein:** Geben Sie den Text ein, der als Titel angezeigt werden soll. Halten Sie ihn kurz und aussagekräftig. * **Platzierung:** Der Titel wird automatisch auf der linken Seite Ihrer Avonni Card angezeigt und bietet einen visuellen Ankerpunkt. **Beispiel:** Wenn Ihre Avonni Card Produktinformationen anzeigt, könnten Sie einen Kartentitel wie "Ort" verwenden. ### Header anzeigen Aktivieren Sie das Attribut "Header anzeigen", um oben rechts in Ihrer Avonni Card einen vielseitigen Container hinzuzufügen. Damit können Sie: * **Karteninhalt anpassen:** Sie können andere Komponenten wie Schaltflächen, Symbole oder zusätzlichen Text per Drag-and-drop direkt in den Header ziehen. * **Flexible Layouts erstellen:** Ordnen Sie Elemente im Header an, um Ihrer Karte das perfekte Aussehen und die gewünschte Funktionalität zu verleihen. **Beispiel:** Fügen Sie auf einer Kundenkontoseite eine Schaltfläche "Neuen Fall erstellen" hinzu. Ein Klick auf diese Schaltfläche würde einen Flow-Dialog auslösen, der den Benutzer durch das Einreichen eines neuen Supportfalls und das Erfassen aller erforderlichen Informationen führt. ### Footer anzeigen Diese Option aktiviert einen Footer-Bereich am unteren Rand Ihrer Avonni Card. Sie können den bereitgestellten Footer-Slot verwenden, um Inhalte wie Links, Schaltflächen oder zusätzlichen Text hinzuzufügen. ### Innenabstand des Inhalts Passen Sie den Abstand um den Inhalt in Ihrer Karte an. Verwenden Sie diese Einstellung, um ein engeres Layout mit Inhalt direkt am Rand zu erstellen oder mehr Freiraum hinzuzufügen. ## Anleitungen | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | | [**Eine MapCard-Präsentation erstellen**](/experience-cloud/experience-cloud-de/anleitungen/components/card/creating-a-mapcard-showcase.md) | Lernen Sie, mit Avonni Card- und Map-Komponenten eine MapCard-Präsentation zu erstellen | ## Erscheinungsbild ### **Größe** * **Breite:** Steuert die horizontale Breite der Karte. Sie können feste Breiten (Pixel, Prozente) verwenden oder die Karte an ihre Inhalte bzw. die Größe des Containers anpassen lassen. * **Höhe:** Steuert die vertikale Höhe der Karte. Ähnlich wie bei der Breite können Sie feste oder flexible Höheneinstellungen verwenden. * **Überlauf:** Legt fest, wie die Karte mit Inhalten umgeht, die ihre Abmessungen überschreiten. Zu den Optionen gehören möglicherweise: * **Sichtbar:** Inhalte fließen über die Grenzen der Karte hinaus. * **Ausgeblendet:** Inhalte werden an den Rändern der Karte abgeschnitten. * **Scrollen:** Fügt der Karte Scrollleisten hinzu, wenn der Inhalt überläuft. ### **Header** * **Hintergrundfarbe:** Legt die Hintergrundfarbe des Header-Bereichs der Karte fest. * **Textfarbe:** Legt die Farbe aller Textelemente im Header fest. * **Schriftgröße:** Steuert die Größe des Header-Texts. * **Schriftgewicht:** Legt die Schriftstärke des Header-Texts fest (z. B. normal, fett, leicht). * **Schriftart:** Legt die für den Header-Text verwendete Schriftart fest. * **Untere Rahmenstärke:** Legt die Stärke des unteren Rahmens fest, der den Header vom Hauptinhalt der Karte trennt. * **Untere Rahmenfarbe:** Legt die Farbe des unteren Rahmens im Header fest. ### **Medien** * **Breite:** Steuert die Breite des Medienbereichs der Karte (wahrscheinlich für Bilder oder Videos). * **Höhe:** Steuert die Höhe des Medienbereichs der Karte. * **Objektanpassung:** Bestimmt, wie ein Bild oder Video skaliert werden soll, damit es in seinen Container passt. Zu den Optionen gehören: * **Füllen:** Streckt den Inhalt, um den verfügbaren Platz auszufüllen, wodurch das Seitenverhältnis möglicherweise verzerrt wird. * **Einpassen:** Skaliert den Inhalt so, dass er vollständig in den verfügbaren Platz passt, wodurch möglicherweise leere Bereiche entstehen. * **Überdecken:** Skaliert den Inhalt so, dass er den gesamten Bereich abdeckt, wodurch er möglicherweise zugeschnitten wird. * **Keine:** Zeigt den Inhalt in seiner ursprünglichen Größe an. * **Verkleinern:** Der Inhalt wird verkleinert, wenn er die Containerabmessungen überschreiten würde; andernfalls wird er in ursprünglicher Größe angezeigt. * **Rahmengröße:** Steuert die Stärke des Rahmens um das Medienelement herum. * **Rahmenfarbe:** Legt die Farbe des Rahmens um das Medienelement fest. ### **Rahmen** * **Größe:** Legt die gesamte Stärke des Rahmens fest, der die gesamte Karte umgibt. * **Radius:** Steuert, wie abgerundet die Ecken der Karte sind. * **Farbe:** Legt die Farbe des Kartenrahmens fest --- # 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-card.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.