> 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-profile-card.md). # AX - Profile Card ## Überblick **AX - Profile Card** ist eine Experience-Cloud-Komponente, die Benutzer- oder Kontaktdaten in einem stilisierten Kartenformat mit Profilbildern, Namen, Details und optionalen Hintergrundbildern auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Teammitglieder, Kundenkontakte, Partnervertreter oder Mitwirkende der Community mit einheitlicher visueller Formatierung zu präsentieren. Konfigurieren Sie, welche Felder angezeigt werden, fügen Sie Profilbilder hinzu, passen Sie das Styling an und schließen Sie Aktionsschaltflächen im Experience Builder ein. Ideal für Teamverzeichnisse, Kontaktlisten, Profile von Community-Mitgliedern, Bereiche wie „Lernen Sie Ihren Vertreter kennen“ oder überall dort, wo Ihr Portal professionelle Profilanzeigen benötigt.
{% 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 daher ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht. {% endhint %} ## Erste Schritte Nutzen Sie dieses einfache Tutorial, um die Grundlagen der Profile-Card-Komponente kennenzulernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %} ## Konfiguration ### Slots Die Avonni Profile-Card-Komponente bietet eine flexible, dynamische Möglichkeit, über Slots eine Vielzahl von Informationen darzustellen. Diese Slots sind definierte Bereiche innerhalb der Komponente, in die andere Komponenten eingefügt werden können, wodurch umfangreiche Anpassungen und Funktionalität möglich werden. #### Slot-Typen 1. **Inhalts-Slot:** * Der Hauptbereich für detaillierte Informationen. * Ideal zum Hinzufügen verschiedener Elemente wie Text, Listen, Bilder oder benutzerdefinierter Komponenten. * Kann zur Anzeige umfassender Daten oder interaktiver Elemente verwendet werden. 2. **Kopfzeilen-Slot:** * Für Titel, Überschriften oder einleitende Inhalte reserviert. * Geeignet für Textbezeichnungen, Avatare, Symbole oder jede Komponente, die Kontext liefert. * Verbessert das unmittelbare Verständnis des Zwecks der Profile Card. 3. **Aktions-Slot:** * Für interaktive Elemente wie Schaltflächen oder Hyperlinks reserviert. * Ermöglicht Benutzerinteraktion und bietet Aktionen wie das Bearbeiten von Profilen und die Navigation. * Erhöht die Interaktivität der Karte und das Engagement der Benutzer. ### Eigenschaften **Titel** und **Untertitel** Legen Sie die Überschrift und die Begleitzeile der Karte fest — verwenden Sie den Untertitel für zusätzlichen Kontext wie Position oder Abteilung. **Stil des Titeltexts** und **Textstil des Untertitels** Platzieren Sie sie nebeneinander im Panel und legen Sie für jede Zeile die Typografie fest: `Überschrift 1` bis `Überschrift 4`, oder `Absatz 1` / `Absatz 2`. **CMS-Hintergrund** und **Hintergrundquelle** Legen Sie ein Hintergrundbild für die Karte fest — wählen Sie ein Bild aus dem CMS oder geben Sie eine URL für einen visuell ansprechenden Hintergrund an, der Tiefe und Kontext hinzufügt. **Footer anzeigen** zeigt einen Footer-Bereich auf der Karte an, und **Innenabstand des Inhalts** entfernt den Innenabstand um den Inhalt, sodass er bündig an den Kartenkanten sitzt. **CMS-Avatarbild** und **Avatarbild-URL oder Ausdruck** definieren Sie das Avatarbild, und **Name des Fallback-Symbols für den Avatar** legt das Symbol fest, das angezeigt wird, wenn kein Bild verfügbar ist. **Avatar-Variante** legt die Form des Avatars fest (`Quadratisch` oder `Kreisförmig`, die Standardeinstellung) und **Avatar-Größe** seine Größe (`Extra klein`, `Klein`, `Mittel` (Standard), `Groß` oder `Extra groß`). **Avatar-Position** platziert den Avatar auf der Karte — `Oben links` (Standard), `Oben zentriert`, `Oben rechts`, `Unten links`, `Unten mittig`, `Unten rechts`, `Links`, `Mitte` oder `Rechts` — mit **Avatar-Position in kleinen / mittleren / großen Containern** überschreibt die Position pro Breakpoint. ## Formatierung {% tabs %} {% tab title="Kopfzeile" %} | Name | Beschreibung | Verwendung | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **Attribute zur Kopfzeilenformatierung** | Gestalten Sie die Kopfzeile umfassend mit Optionen für Hintergrundfarbe, Textfarbe, Schriftgröße, Stil, Schriftstärke und sogar Rahmenanpassungen. | Passen Sie das Erscheinungsbild der Kopfzeile fein an, um eine optisch ansprechende und leicht lesbare Kopfzeile der Profile Card zu erstellen. | | {% endtab %} | | | {% tab title="Hintergrund & Rahmen" %} | Name | Beschreibung | Verwendung | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Hintergrundfarbe und Rahmen** | Passen Sie die allgemeine Hintergrundfarbe der Karte an und definieren Sie Rahmeneigenschaften wie Größe, Radius und Farbe. | Diese Funktionen ermöglichen eine weitere visuelle Abgrenzung und Verfeinerung des Erscheinungsbilds der Profile Card und stellen sicher, dass sie Ihren Designvorstellungen entspricht. | | {% endtab %} | | | | {% endtabs %} | | | ## Anwendungsfälle | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | [**Die Profile Card so konfigurieren, dass aktuelle Benutzerinformationen angezeigt werden**](/experience-cloud/experience-cloud-de/tutorials/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Richten Sie eine Avonni Card ein, um Benutzerinformationen in Experience Cloud anzuzeigen und so die Personalisierung zu verbessern. | ### Beispiel 1: Kontohighlight-Panel (Container) {% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %} Verwandeln Sie Ihre Partner-Experience-Site mit einer eleganten, informationsreichen Konto-Profile-Card, die wichtige Kontodetails, Branding und Aktionen in den Mittelpunkt stellt. *** #### **Was du erreichen wirst** * **Marken-Kopfzeile:** Zeigen Sie den Kontonamen und die Branche zusammen mit einem Firmenlogo an, um eine sofortige visuelle Wiedererkennung zu ermöglichen * **Kontextbezogene Aktionen:** Starten Sie einen neuen Opportunity-Flow direkt von der Karte aus mit nur einem Klick * **Kompakte Datensatzdetails:** Blenden Sie die relevantesten Kontofelder ein, ohne die Seite zu überladen *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Logo-Feld:** Ein benutzerdefiniertes Feld im Account-Objekt zum Speichern der URL des Firmenlogos * **Bildschirm-Flow:** Ein neuer Opportunity-Bildschirm-Flow, bereit zum Starten * **Schaltflächenkomponente:** In Ihrer Komponentenbibliothek verfügbar * **Record-Detail-Komponente:** In Ihrer Komponentenbibliothek verfügbar *** #### **So richtest du es ein** {% stepper %} {% step %} #### **Fügen Sie die Profile Card zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profile Card auf die Experience-Account-Datensatzseite {% endstep %} {% step %} #### **Konfigurieren Sie die Kartenkopfzeile** * Setzen Sie die Kopfzeile auf `{!Item.Name}` * Setzen Sie den Stil auf `Überschrift 2` * Setzen Sie den Untertitel auf `{!Item.Industry}` {% endstep %} {% step %} #### **Fügen Sie das Firmenlogo hinzu** * Setzen Sie die Avatar-Bild-URL auf `{!Item.LogoURL__c}` * Setzen Sie die Variante auf `Kreisförmig` * Setzen Sie die Größe auf `Mittel` {% endstep %} {% step %} #### **Fügen Sie eine benutzerdefinierte Aktionsschaltfläche hinzu** * Ziehen Sie die Button-Komponente in den Aktions-Slot {% endstep %} {% step %} #### **Fügen Sie ein kompaktes Datensatzlayout hinzu** * Ziehen Sie die Record-Detail-Komponente in den Inhalts-Slot {% endstep %} {% step %} #### **Sehen Sie sich eine Vorschau Ihrer Seite an** * Überprüfen Sie die Karte in der Vorschau, um sicherzustellen, dass Layout, Logo und Aktionsschaltfläche wie erwartet angezeigt werden {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/a253f06b22ccd6ec4f2fe11cd4ee49a608cc1dce" %} [AX - Record Detail](/experience-cloud/experience-cloud-de/experience-components/ax-record-detail.md) {% endcontent-ref %} {% content-ref url="/pages/ddfa61ffe86d642dee4531c737dab63c342c2df6" %} [AX - Button](/experience-cloud/experience-cloud-de/experience-components/ax-button.md) {% endcontent-ref %} *** ### Beispiel 2: Profilinformationen des aktuellen Benutzers {% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %} Bereiten Sie Ihren Benutzern in dem Moment, in dem sie Ihre Experience-Site besuchen, einen warmen, personalisierten Empfang und fördern Sie die Bindung sowie die Akzeptanz der Plattform schon beim ersten Besuch. *** #### **Was du erreichen wirst** * **Persönliche Begrüßung:** Sprechen Sie jeden Benutzer mit seinem Namen an — mit einer dynamischen Willkommensnachricht, die menschlich und nicht generisch wirkt * **Rollenkontext:** Zeigen Sie den Titel des Benutzers unter seinem Namen an, damit Teammitglieder und Kunden sofort verstehen, mit wem sie interagieren * **Profilfoto:** Laden Sie das Profilbild des Benutzers automatisch für ein elegantes, vertrautes Erscheinungsbild *** #### **So richtest du es ein** {% stepper %} {% step %} ### **Fügen Sie die Profile Card zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profile Card auf die Experience-Site-Seite {% endstep %} {% step %} ### **Konfigurieren Sie die Kartenkopfzeile** * Setzen Sie die Kopfzeile auf `Willkommen, {!User.Record.Name}` * Setzen Sie den Stil auf `Überschrift 2` * Setzen Sie den Untertitel auf `{!User.Record.Title}` {% endstep %} {% step %} ### **Richten Sie das Profilbild ein** * Setzen Sie die Avatar-Bild-URL auf `{!User.Record.SmallPhotoUrl}` * Setzen Sie die Avatar-Position auf `Oben zentriert` {% endstep %} {% step %} ### **Sehen Sie sich eine Vorschau Ihrer Seite an** {% endstep %} {% endstepper %} *** **Links** {% content-ref url="/pages/28f4a607bbfb650ac649c377b14f53a8702df9ab" %} [AX - Avatar](/experience-cloud/experience-cloud-de/experience-components/ax-avatar.md) {% endcontent-ref %} {% content-ref url="/pages/34a96c3b8599eba833479d353aee4771f1eaf87b" %} [AX - Accordion Section](/experience-cloud/experience-cloud-de/experience-components/ax-accordion-section.md) {% endcontent-ref %} --- # 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-profile-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.