# Inhaltskarten / Teaser

Das Element kombiniert visuelle Elemente mit klaren Handlungsaufforderungen, um Nutzer gezielt zu einer Aktion zu führen. Diese Karten sind ideal, um Aktionen, Dienstleistungen oder Angebote in einem kompakten und auffälligen Format hervorzuheben.

{% hint style="info" %}
**Wie definiert sich dieses Element?**

Inhaltskarten bestehen aus einer Kombination aus Bild, Text und einem prominenten Button oder Link, der zu einer bestimmten Aktion auffordert. 

Die Karten sind in der Regel als visuelle Boxen gestaltet, die auf den ersten Blick eine klare Botschaft vermitteln. Sie sind flexibel einsetzbar und eignen sich hervorragend für die Bewerbung von **Sonderangeboten**, **neuen Produkten**, **Dienstleistungen** oder **Events**.
{% endhint %}

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FiqrNWWg4z9n2ewSlmzba%2FBildschirmfoto%202024-10-06%20um%2018.11.15.png?alt=media&#x26;token=361e3ad7-bfcc-4e20-a711-91f90f62ffaa" alt=""><figcaption></figcaption></figure>

### Allgemeine - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FNehJ6Fd48EONomHCQCb5%2FBildschirmfoto%202024-10-06%20um%2018.13.41.png?alt=media&#x26;token=668bd5fa-931c-4913-8342-9bfbb2dc3e59" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="262">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Anzeigemodus (1)</td><td><strong>Bild und Inhalt</strong>, oder <strong>nur Inhalt</strong></td></tr><tr><td>Verlinkung (2)</td><td><a data-mention href="../konfigurationsbausteine/verlinkung">verlinkung</a></td></tr><tr><td>Button Einstellungen (3)</td><td><a data-mention href="../konfigurationsbausteine/button">button</a></td></tr></tbody></table>

### Bild - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2Fpad5XtYGUORMT2MjXPuu%2FBildschirmfoto%202024-10-06%20um%2018.14.52.png?alt=media&#x26;token=22b29055-f14d-4dae-9796-6c41bf065e2d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="262">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Passform des Bildes (1)</td><td><strong>Cover</strong> = Bild wird über den gesamten Bereich gestreckt<br><strong>Beinhalten</strong> = Das Bild wird innerhalb des vorgesehenen Platzes ganz dargestellt</td></tr><tr><td>Max. Höhe des Bildes (2)</td><td>Um ein einheitliches Gesamtbild mehrerer Boxen nebeneinander zu gewährleisten, wird hier die Höhe des Bildes begrenzt.</td></tr><tr><td>Medium hochladen (3)</td><td>Hier kannst du das Bild aus der Shopware Mediathek hochladen / zuweisen</td></tr></tbody></table>

### Inhalt - Einstellung

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F8B9T9S1N64BvFBp6ZEFP%2FBildschirmfoto%202024-10-06%20um%2018.16.58.png?alt=media&#x26;token=f61b7132-1f62-4166-995f-ee8dfcc297f4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="262">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Text-Ausrichtung (1)</td><td>Hier definierst du, wie Überschrift und Inhalt ausgerichtet wird.</td></tr><tr><td>Überschrift (2)</td><td>Textbaustein für die Überschrift</td></tr><tr><td>Inhalt (3)</td><td>Hier kannst du den Inhalt definieren. Auch TWIG Variablen sind möglich</td></tr></tbody></table>

### Farben - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FA2nOlX7oImtAtwJ694Qf%2FBildschirmfoto%202024-10-06%20um%2018.18.06.png?alt=media&#x26;token=da6cc917-ddbe-4128-8b23-2ac97049eaf1" alt=""><figcaption></figcaption></figure>

### Responsive - Einstellungen

{% content-ref url="../konfigurationsbausteine/schriftgrosse" %}
[schriftgrosse](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/schriftgrosse)
{% endcontent-ref %}

### SEO - Einstellungen

{% content-ref url="../konfigurationsbausteine/seo" %}
[seo](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/seo)
{% endcontent-ref %}