# 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 %}