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. Only one face is visible at a time. When flipped, the card rotates with a 3D animation.
Warning: Mobile apps only. This block is not offered in the web builder.
Flippable Card is well-suited for revealing more content on a mobile screen without navigating away, for example flashcards, product detail reveals and plan comparisons.
Properties Reference
Property | Type | Default | Description |
|---|---|---|---|
Flip Direction | Horizontal | Vertical | Horizontal | The axis the card rotates on. |
Animation Duration (ms) | number (ms) | 800 on new cards | Duration of the flip animation in milliseconds. |
Initial Side | Front | Back | Front | Which face is visible on initial render. |
Enable Tap to Flip | boolean | On | Tapping the card flips it. |
Enable Swipe to Flip | boolean | On | Swiping the card along its flip axis flips it. |
Front slot | slot (nested blocks) | — | Content of the front face. |
Back slot | slot (nested blocks) | — | Content of the back face. Can use a completely different layout from the front. |
Programmatic Flip
Flip the card from any action chain with the Trigger Component Method action:
Add a Trigger Component Method action to any event chain.
Pick the Flippable Card as the block.
Pick the Flip Card method.
Flip Card toggles to whichever face isn't currently shown. It works even when Enable Tap to Flip and Enable Swipe to Flip are both off, so you can turn both off to flip the card only from your own controls. Every flip fires the On Flip event.
Tip: On mobile, the card captures taps, so a Button placed on a face can't be tapped. Put controls that flip the card, such as a "Go back" button, outside the card and wire them to the Flip Card method.
Exposed State
Binding | Type | Description |
|---|---|---|
{{ id.sideOnTop }} | string |
|
Events
Event | Fires when | What to read |
|---|---|---|
On Flip | A flip starts — from a tap, a completed swipe, or the Flip Card method. A tap while Enable Tap to Flip is off, or a swipe that doesn't complete, fires nothing. |
|
Setting Up a Flashcard
Add a Repeatable: Drop a Repeatable onto your mobile app page and bind it to a flashcard data source.
Drop the card into the template: Drag Flippable Card into the Repeatable's template. Keep Enable Tap to Flip on, and keep Initial Side set to Front so each card starts on the question.
Design the front face: Click into the Front slot. Add a Typography block with the question text bound to the current item:
{{ repeatable1.context.item.question }}. Add a small "Tap to reveal" hint in a muted style.Design the back face: Click into the Back slot. Add a Typography block with
{{ repeatable1.context.item.answer }}and a Tag block showing the difficulty level.
Examples
Example: Product detail reveal
Front face: product image, name and price. Back face: full description and specifications. Keep Enable Tap to Flip on. The flip reveals product detail without leaving the screen. Put the "Add to cart" button outside the card, because blocks on a face can't be tapped on mobile.
Example: Pricing plan toggle
Front face: monthly pricing. Back face: annual pricing with a savings callout. Turn off Enable Tap to Flip and Enable Swipe to Flip, and add a toggle button outside the card that runs Trigger Component Method with the Flip Card method. Bind the toggle label to {{ card.sideOnTop === 'back' ? "View Monthly" : "View Annual" }}.
Related Pages
Page | Relationship |
|---|---|
Alternative to the flip for revealing detail content — use when the detail is larger than a card | |
Sequential reveal pattern — use for step-by-step content rather than two-face toggle | |
Wrap Flippable Card in a Repeatable to create a deck of flashcards |