# 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="/files/eFjHnDFMO8VDQYls1rYg" alt=""><figcaption></figcaption></figure>

### Allgemeine - Einstellungen

<figure><img src="/files/h54usJZXXRGLA62DA2ID" 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="/pages/Q0EbnJqtuAaJuN9BHAE0">/pages/Q0EbnJqtuAaJuN9BHAE0</a></td></tr><tr><td>Button Einstellungen (3)</td><td><a data-mention href="/pages/IDCzxbLczQ60ESEzaHLK">/pages/IDCzxbLczQ60ESEzaHLK</a></td></tr></tbody></table>

### Bild - Einstellungen

<figure><img src="/files/NV4yVfGvP6YePMEXHCyo" 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="/files/KckPEVuibynnsA3XoshD" 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="/files/7xBoNtohHHzTpumhzxyn" alt=""><figcaption></figcaption></figure>

### Responsive - Einstellungen

{% content-ref url="/pages/ZJ9dlvURdA2KvrRvb6W0" %}
[Schriftgröße](/cms-bundle/elemente/konfigurationsbausteine/schriftgrosse.md)
{% endcontent-ref %}

### SEO - Einstellungen

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}


---

# Agent Instructions: 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.rh-webdesign.com/cms-bundle/elemente/call-to-action/inhaltskarten-teaser.md?ask=<question>
```

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.