# Icon - Flipbox

Mit diesem Element kannst du Inhalte so gestalten, dass sie beim Überfahren mit der Maus umgeblendet werden. Diese Art von Interaktion zieht die Aufmerksamkeit der Nutzer auf sich und ermöglicht es dir, Informationen auf kreative Weise zu präsentieren.

Im Prinzip wird nach dem Mousehover die Rückseite der Box dargestellt / die gesamte Box mit einer Animation umgedreht. 

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FovO5EnCjTmwMVv4gZgJC%2FBildschirmfoto%202024-10-05%20um%2023.57.43.png?alt=media&#x26;token=7e800ade-48db-4d8d-8658-6bcf996a79b4" 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%2FZNLQOPmoLsOWcIBTvA5n%2FBildschirmfoto%202024-10-06%20um%2000.00.26.png?alt=media&#x26;token=1642a1bb-8b2e-4aba-8808-0f3bbb9c7f82" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="289">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Animationseffekt (1)</td><td>Hier kann der Animationseffekt eingestellt werden.</td></tr><tr><td>Richtung der Animation (2)</td><td>Horizontal oder vertikal.</td></tr><tr><td>Verlinkung (3)</td><td><a data-mention href="../konfigurationsbausteine/verlinkung">verlinkung</a></td></tr></tbody></table>

### Layout - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FUOHYq64HpkUtz0gbXYRJ%2FBildschirmfoto%202024-10-06%20um%2000.07.53.png?alt=media&#x26;token=88935068-09f9-4756-a70c-0d0fd74cc22d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="264">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Höhe der Flipbox (1)</td><td>Eine feste Höhe wird hier gesetzt. Achte darauf, dass dein Inhalt entsprechend angepasst wird.</td></tr><tr><td>Vertikale Ausrichtung (2)</td><td>Die vertikale Ausrichtung des gesamten Inhalts innerhalb der Flipbox </td></tr><tr><td>Horizontale Ausrichtung (3)</td><td>Die horizontale Ausrichtung des gesamten Inhalts innerhalb der Flipbox </td></tr></tbody></table>

### Vorderseite - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FGCS7TtYLYzdNQMRJrfoT%2FBildschirmfoto%202024-10-06%20um%2000.11.48.png?alt=media&#x26;token=d954385a-ea84-45f0-b8f3-3f52289b4eeb" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="260">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Hintergrundtyp (1)</td><td>Farbe, Bild, oder Farbverlauf wählbar</td></tr><tr><td>Icon (2) </td><td><a data-mention href="../konfigurationsbausteine/icon">icon</a></td></tr></tbody></table>

### Rückseite - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FMNkIKImEm36mnp4sJbiv%2FBildschirmfoto%202024-10-06%20um%2000.26.03.png?alt=media&#x26;token=5719efa5-8ad8-4a7d-9185-5fcbb8e5e8db" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="242">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Inhalt der Box (1)</td><td>Der Inhalt, der auf der Rückseite dargestellt wird. Auch TWIG Variablen sind möglich.</td></tr><tr><td>Button (2)</td><td><a data-mention href="../konfigurationsbausteine/button">button</a></td></tr><tr><td>Gesamte Box klickbar (3)</td><td>Nicht nur der Button, sondern auch die Box an sich wird verlinkt</td></tr></tbody></table>

### Responsive - Einstellungen

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

### SEO - Einstellungen

{% content-ref url="../konfigurationsbausteine/seo" %}
[seo](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/seo)
{% 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/icon-boxen/icon-flipbox.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.