Overview

The FlippableCard block is a two-face container: a front slot and a back slot, each of which can contain any combination of nested blocks (text, images, buttons, forms, charts). Only one face is visible at a time. When flipped, the card rotates on a configurable axis with a CSS 3D perspective animation.

Flippable Card is well-suited for interactions where you want to reveal additional content on demand without navigating away — flashcard learning, product detail reveals, price/plan comparison toggles, and interactive data explorations.

Properties Reference

Programmatic Flip

When flipTrigger = programmatic (or even alongside an existing trigger), flip the card from any action chain using the Control Block action:

1. Add a Control Block action to any event chain

2. Set Block ID to the Flippable Card's ID

3. Set Operation to flip

The flip operation toggles to whichever face is not currently shown. To force a specific face, use showFront or showBack operations instead.

Tip: Place a "Go back" button inside the back slot and wire its onClick to a Control Block action targeting the same Flippable Card with operation flip. This gives users an explicit navigation control on the back face — important for accessibility when flipTrigger = programmatic and there is no other user gesture.

Exposed State

Setting Up a Flashcard

1. Drop the block: Drag FlippableCard onto the canvas. Set Flip Trigger = onClick and Flip Duration = 400ms.

2. Design the front face: Click into the Front Slot in the canvas. Add a Typography block with the question text bound to a Repeatable's current item: {{ item.question }}. Add a small "Tap to reveal" hint text in a muted style at the bottom.

3. Design the back face: Click into the Back Slot. Add a Typography block with {{ item.answer }}. Add a Tag block showing the difficulty level. Add a Button labeled "Next card" with an action that advances the Repeatable index.

4. Wrap in a Repeatable: Place the FlippableCard inside a Repeatable bound to a flashcard data source. Each card iteration binds to a different question/answer pair. Reset defaultFace = front so each card starts showing the question when the Repeatable iterates.

Examples

Example: Product detail reveal

Front face: product image, name, and price. Back face: full description, specifications table, and "Add to cart" button. Set Flip Trigger = onClick. The flip reveals product detail without a page navigation — keeping the user in context of the product grid.

Example: Pricing plan toggle

Front face: monthly pricing. Back face: annual pricing with savings callout. Use a toggle button outside the card that fires a Control Block action with operation: flip on the card. Set flipTrigger = programmatic so only the external toggle controls it. Bind the toggle label to {{ card.isFlipped ? "View Monthly" : "View Annual" }}.

Related Pages