> 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 - Card
## Überblick
**AX - Card** ist eine Experience-Cloud-Komponente, die Inhalte in einem abgeschlossenen, visuell strukturierten Format auf Experience-Sites-Seiten 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 & Drop in die Card, um ihren Inhalt zu erstellen, und konfigurieren Sie in Experience Builder Stil, Kopf- und Fußzeilen.
Ideal für Produktkataloge, Ressourcenbibliotheken, Profile von Teammitgliedern, Artikelvorschauen oder überall dort, wo Portal-Inhalte eine klare visuelle Organisation und Trennung benötigen.
{% hint style="danger" %}
Diese Komponente [verwendet 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
### Einen Kartentitel hinzufügen
Geben Sie Ihrer Avonni Card einen klaren und informativen Titel, damit Nutzer ihren Inhalt schnell erkennen können. So geht's:
* **Das Attribut "Title" finden:** Diese Einstellung befindet sich in den Konfigurationsoptionen der Avonni Card 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 dient als visueller Ankerpunkt.
**Beispiel:**
Wenn Ihre Avonni Card Produktinformationen anzeigt, könnten Sie als Titel etwa "Standort" verwenden.
**Titeltextstil** legt die Typografie dieses Titels fest: Schriftart, Größe, Gewicht und Farbe.
### Kopfzeile anzeigen
"Kopfzeile anzeigen" ist standardmäßig aktiviert. Dadurch werden oben in Ihrer Avonni Card zwei Ablagebereiche sichtbar: **Aktionen** oben rechts, immer verfügbar, solange die Kopfzeile angezeigt wird, und **Titel** oben links, nur verfügbar, solange das **Titel** Attribut leer ist, da ein Titel diesen Bereich mit eigenem Text füllt. Dadurch können Sie:
* **Karteninhalt anpassen:** Sie können andere Komponenten, etwa Schaltflächen, Symbole oder zusätzlichen Text, direkt in die Kopfzeile ziehen und dort ablegen.
* **Flexible Layouts erstellen:** Ordnen Sie Elemente innerhalb der Kopfzeile an, um das perfekte Erscheinungsbild und die gewünschte Funktionalität Ihrer Card zu erreichen.
**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 Nutzer beim Einreichen eines neuen Supportfalls und beim Erfassen aller erforderlichen Informationen anleitet.
### Fußzeile anzeigen
Diese Option aktiviert einen Fußzeilenbereich am unteren Rand Ihrer Avonni Card. Ü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 Card an. Verwenden Sie diese Einstellung, um ein kompakteres Layout zu erstellen, bei dem der Inhalt direkt am Rand anliegt, oder um mehr Freiraum zu schaffen. Bei der Card ist sie standardmäßig deaktiviert, sodass der Inhalt seinen Innenabstand behält, bis Sie sie aktivieren.
### Symbole & Medien
**Symbolname** zeigt ein Lightning-Design-System-Symbol in der Kartenkopfzeile an.
**CMS-Bild** und **Bild-URL oder Ausdruck** legt ein Medienbild für die Card fest — aus einem CMS-Asset oder einer URL — und **Bildposition** platziert es in Bezug auf den Inhalt: `oben`, `unten`, `links`, `rechts`, `zentriert`, `Hintergrund`, oder `Overlay`.
## Anwendungsfälle
| Name | Beschreibung |
| ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [**Eine MapCard-Showcase erstellen**](/experience-cloud/experience-cloud-de/tutorials/components/card/creating-a-mapcard-showcase.md) | Erfahren Sie, wie Sie mit Avonni Card- und Map-Komponenten eine MapCard-Showcase erstellen |
## Stil
{% tabs %}
{% tab title="Größe" %}
* **Breite:** Steuert die horizontale Breite der Card. Sie können feste Breiten (Pixel, Prozente) verwenden oder die Card an ihren Inhalt bzw. die Größe ihres Containers anpassen lassen.
* **Höhe:** Steuert die vertikale Höhe der Card. Ähnlich wie bei der Breite können Sie feste oder flexible Höheneinstellungen verwenden.
* **Überlauf:** Legt fest, wie die Card mit Inhalt umgeht, der ihre Abmessungen überschreitet. Zu den Optionen gehören:
* **Sichtbar:** Inhalt fließt über die Grenzen der Card hinaus.
* **Versteckt:** Inhalt wird an den Rändern der Card abgeschnitten.
* **Scrollen:** Fügt der Card Scrollleisten hinzu, wenn der Inhalt überläuft.
{% endtab %}
{% tab title="Kopfzeile" %}
* **Hintergrundfarbe:** Legt die Hintergrundfarbe des Kopfzeilenbereichs der Card fest.
* **Textfarbe:** Legt die Farbe aller Textelemente innerhalb der Kopfzeile fest.
* **Schriftgröße:** Steuert die Größe des Kopfzeilentexts.
* **Schriftgewicht:** Legt die Stärke des Kopfzeilentexts fest (z. B. normal, fett, leicht).
* **Schriftfamilie:** Gibt die Schriftart an, die für den Kopfzeilentext verwendet wird.
* **Größe des unteren Randes:** Legt die Dicke des unteren Rahmens fest, der die Kopfzeile vom Hauptinhalt der Card trennt.
* **Farbe des unteren Randes:** Legt die Farbe des unteren Rahmens in der Kopfzeile fest.
{% endtab %}
{% tab title="Medien" %}
* **Breite:** Steuert die Breite des Medienbereichs der Card (wahrscheinlich für Bilder oder Videos).
* **Höhe:** Steuert die Höhe des Medienbereichs der Card.
* **Objektanpassung:** Bestimmt, 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 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.
* **Abdecken:** Skaliert den Inhalt so, dass der gesamte Platz abgedeckt wird, wodurch er möglicherweise zugeschnitten wird.
* **Ohne:** 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 Gesamtstärke des Rahmens fest, der die gesamte Card umgibt.
* **Radius:** Steuert, wie abgerundet die Ecken der Card 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
