> 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 auf Experience-Sites-Seiten in einem abgeschlossenen, visuell strukturierten Format anzeigt. Verwenden Sie sie, um Informationen in organisierten Blöcken darzustellen – etwa Produktdetails, Benutzerprofile, Artikel, Ressourcen oder andere Inhalte, die von einer visuellen Trennung profitieren. 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, Profile von Teammitgliedern, Artikelvorschauen oder überall dort, wo Portalinhalte 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 ### Kartentitel hinzufügen Geben Sie Ihrer Avonni-Karte einen klaren und informativen Titel, damit Benutzer den Inhalt schnell erkennen können. So geht's: * **Suchen Sie das Attribut „Kartentitel“:** 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, den Sie als Titel anzeigen möchten. Halten Sie ihn kurz und aussagekräftig. * **Platzierung:** Der Titel wird automatisch auf der linken Seite Ihrer Avonni-Karte angezeigt und dient als visueller Ankerpunkt. **Beispiel:** Wenn Ihre Avonni-Karte Produktinformationen anzeigt, könnten Sie einen Kartentitel wie „Ort“ verwenden. ### Kopfzeile anzeigen Aktivieren Sie das Attribut „Kopfzeile anzeigen“, um oben rechts in Ihrer Avonni-Karte 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 die Kopfzeile ziehen. * **Flexible Layouts erstellen:** Ordnen Sie Elemente innerhalb der Kopfzeile an, um das perfekte Erscheinungsbild und die gewünschte Funktionalität Ihrer Karte zu erreichen. **Beispiel:** Fügen Sie auf einer Kundenkontoseite eine Schaltfläche „Neuen Fall erstellen“ hinzu. Beim Klicken auf diese Schaltfläche würde ein Flow-Dialog ausgelöst, der den Benutzer durch das Einreichen eines neuen Supportfalls und das Erfassen aller erforderlichen Informationen führt. ### Fußzeile anzeigen Diese Option aktiviert einen Fußzeilenbereich am unteren Rand Ihrer Avonni-Karte. Über den bereitgestellten Fußzeilen-Slot können Sie Inhalte wie Links, Schaltflächen oder zusätzlichen Text hinzufügen. ### Innenabstand des Inhalts Passen Sie den Abstand um den Inhalt innerhalb Ihrer Karte an. Verwenden Sie diese Einstellung, um ein kompakteres Layout zu erstellen, bei dem der Inhalt bündig am Rand liegt, oder um mehr Freiraum zu schaffen. ### Symbol & Medien **Symbolname** zeigt ein Lightning Design System-Symbol in der Kopfzeile der Karte an. **CMS-Bild** und **Bild-URL oder Ausdruck** legen Sie ein Medienbild für die Karte fest – aus einem CMS-Asset oder per URL – und **Bildposition** platziert es relativ zum Inhalt: `oben`, `unten`, `links`, `rechts`, `zentriert`, `Hintergrund`, oder `Überlagerung`. ## Anwendungsfälle | Name | Beschreibung | | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | [**Erstellen eines MapCard-Showcases**](/experience-cloud/experience-cloud-de/anleitungen/components/card/creating-a-mapcard-showcase.md) | Erfahren Sie, wie Sie mit Avonni-Card- und Map-Komponenten einen MapCard-Showcase erstellen | ## Gestaltung {% tabs %} {% tab title="Größe" %} * **Breite:** Steuert die horizontale Breite der Karte. Sie können feste Breiten (Pixel, Prozentwerte) verwenden oder die Karte an ihre Inhalte bzw. an 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. Optionen können sein: * **Sichtbar:** Inhalt fließt außerhalb der Grenzen der Karte weiter. * **Ausgeblendet:** Inhalt wird an den Rändern der Karte abgeschnitten. * **Scrollen:** Fügt der Karte Bildlaufleisten hinzu, wenn der Inhalt überläuft. {% endtab %} {% tab title="Kopfzeile" %} * **Hintergrundfarbe:** Legt die Hintergrundfarbe des Kopfzeilenbereichs der Karte fest. * **Textfarbe:** Legt die Farbe aller Textelemente innerhalb der Kopfzeile fest. * **Schriftgröße:** Steuert die Größe des Kopfzeilentexts. * **Schriftstärke:** Legt die Fettheit des Kopfzeilentexts fest (z. B. normal, fett, leicht). * **Schriftart:** Gibt die Schriftart an, die für den Kopfzeilentext verwendet wird. * **Größe des unteren Rahmens:** Legt die Dicke des unteren Rahmens fest, der die Kopfzeile vom Hauptinhalt der Karte trennt. * **Farbe des unteren Rahmens:** Legt die Farbe des unteren Rahmens in der Kopfzeile fest. {% endtab %} {% tab title="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:** Legt fest, wie ein Bild oder Video skaliert werden soll, um in seinen Container zu passen. Zu den Optionen gehören: * **Füllen:** Streckt den Inhalt, um den verfügbaren Raum zu füllen, wodurch das Seitenverhältnis möglicherweise verzerrt wird. * **Einpassen:** Skaliert den Inhalt so, dass er vollständig in den Raum passt, wodurch möglicherweise leere Bereiche bleiben. * **Abdecken:** Skaliert den Inhalt so, dass der gesamte Raum abgedeckt wird, wodurch er möglicherweise beschnitten 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 der ursprünglichen Größe angezeigt. * **Rahmengröße:** Steuert die Dicke des Rahmens um das Medienelement. * **Rahmenfarbe:** Legt die Farbe des Rahmens um das Medienelement fest. {% endtab %} {% tab title="Rahmen" %} * **Größe:** Legt die gesamte Dicke des Rahmens fest, der die gesamte Karte umgibt. * **Radius:** Steuert, wie abgerundet die Ecken der Karte sind. * **Farbe:** Legt die Farbe des Kartenrahmens fest {% endtab %} {% endtabs %} --- # 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-de/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.