> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/icon-boxen/icon-flipbox.md).

# Icon - Flipbox

Flipbox element in the shopping experiences

With this element, you can design content to flip when hovered over. This type of interaction draws users' attention and allows you to present information in a creative way.

Essentially, after mouse hover, the back of the box is displayed / the entire box is flipped with an animation.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FERgCTK0ULGqXdZuMM8lB%2FBildschirmfoto%202024-10-07%20um%2020.23.02.png?alt=media&amp;token=b02db729-b0e5-4e63-b035-d2790f3d7775" alt=""><figcaption></figcaption></figure>

### General Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FyUxXZ15TAq8VhXjkHRO5%2FBildschirmfoto%202024-10-07%20um%2020.23.43.png?alt=media&amp;token=61d4612b-c15f-4722-b908-117401b5a38b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="289">Function</th><th>Description</th></tr></thead><tbody><tr><td>Animation Effect (1)</td><td>Here you can set the animation effect.</td></tr><tr><td>Direction of Animation (2)</td><td>Horizontal or vertical.</td></tr><tr><td>Linking (3)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/verlinkung.md">Linking</a></td></tr></tbody></table>

### Layout Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fqtfcqa5NlWJpzV8sS8yg%2FBildschirmfoto%202024-10-07%20um%2020.41.32.png?alt=media&amp;token=795c0b30-1399-47c3-a157-5d2b8c30f54f" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="264">Function</th><th>Description</th></tr></thead><tbody><tr><td>Height of Flipbox (1)</td><td>A fixed height is set here. Make sure your content is adjusted accordingly.</td></tr><tr><td>Vertical Alignment (2)</td><td>The vertical alignment of all content within the flipbox</td></tr><tr><td>Horizontal Alignment (3)</td><td>The horizontal alignment of all content within the flipbox</td></tr></tbody></table>

### Front Side Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F7vK9uLmi59jyPfTgfezJ%2FBildschirmfoto%202024-10-07%20um%2021.01.44.png?alt=media&amp;token=4dbaf185-0988-47a4-a923-37d52d160799" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="260">Function</th><th>Description</th></tr></thead><tbody><tr><td>Background Type (1)</td><td>Choose color, image, or gradient</td></tr><tr><td>Icon (2)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/icon.md">Icon</a></td></tr></tbody></table>

### Back Side Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F3OFEgpzSH61BnvVzZY7F%2FBildschirmfoto%202024-10-07%20um%2021.03.21.png?alt=media&amp;token=82b7e426-179c-448c-bda0-d6cb948c3886" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="242">Function</th><th>Description</th></tr></thead><tbody><tr><td>Content of the Box (1)</td><td>The content displayed on the back side. TWIG variables are also possible.</td></tr><tr><td>Button (2)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/button.md">Button</a></td></tr><tr><td>Entire Box Clickable (3)</td><td>Not only the button, but also the box itself is linked</td></tr></tbody></table>

### Responsive Settings

{% content-ref url="/pages/kXnecx9xgMjluse3dktl" %}
[Elements per Row](/cms-bundle/en/elemente/konfigurationsbausteine/elemente-pro-reihe.md)
{% endcontent-ref %}

### SEO Settings

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