From 0427a0d0a0988202b2041e29aa7d2cbea46fcc87 Mon Sep 17 00:00:00 2001
From: Pinkesh <pinkesh.mars@gmail.com>
Date: Fri, 11 Sep 2026 11:30:50 +0530
Subject: [PATCH] Update Flippable Card Widget

---
 .../widgets/built-in-widgets/flippablecard.md | 111 +++++-------------
 1 file changed, 30 insertions(+), 81 deletions(-)

diff --git a/docs/resources/ui/widgets/built-in-widgets/flippablecard.md b/docs/resources/ui/widgets/built-in-widgets/flippablecard.md
index 66d8cc64..d554a932 100644
--- a/docs/resources/ui/widgets/built-in-widgets/flippablecard.md
+++ b/docs/resources/ui/widgets/built-in-widgets/flippablecard.md
@@ -3,22 +3,21 @@ slug: flippable-card
 title: Flippable Card
 tags: [Layout Elements, Components]
 keywords: [Flippable Card, Layout Element, Component, Widget]
-description: Learn how to add Flippable Card widget in your FlutterFlow app.
+description: Learn how to add and customize a FlippableCard widget in your FlutterFlow app.
 ---
 
-# FlippableCard
-The FlippableCard widget provides the visual interaction called 'Flip card animation'. Initially, it shows the front side of the card, and when you tap on it, it shows the back side.
+# Flippable Card
 
-You could use this widget to show and hide details of an item (e.g., credit card, online course card, coupon card, etc.)
+The **FlippableCard** widget displays two sides of content in the same space. It shows the front side by default and flips to the back side when a user taps it. You can use it for flashcards, product details, coupon terms, or other content that users can reveal on demand.
 
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/LZAcR5zEXTZKvOpNEWWx?embed&show_copy_link=true"
-        title=""
+    <iframe
+        src="https://demo.arcade.software/ww957rvU5mAJNFAO8dtd?embed&show_copy_link=true"
+        title="Preview a FlippableCard interaction"
         style={{
             position: 'absolute',
             top: 0,
@@ -37,23 +36,23 @@ You could use this widget to show and hide details of an item (e.g., credit card
 </div>
 <p></p>
 
-## Adding FlippableCard widget
+## Adding a FlippableCard Widget
 
 To add the FlippableCard widget:
 
-1. First, click on the **+ Add Widget** and drag the **FlippableCard** widget from the **Layout Elements** tab or add it directly from the widget tree.
-2. Select the **Card Front** from the widget tree and customize or replace the **Container** with the widget of your choice. For example, replacing it with a **Credit Card** widget (under the Templates > Card Views).
-3. To edit the back side of the card, select the **FlippableCard**, move to the properties panel, scroll down to the **Flippable Card Propertie**s and enable the **Edit Back of Card**.
-4. Now select the **Card Back** from the widget tree and customize or replace the **Container** with the widget of your choice. For example, again, add the Credit Card widget and customize it to show the details.
+1. Open the [**Widget Palette**](../../../../intro/ff-ui/widget-palette.md) and add the **FlippableCard** widget from **Layout Elements**.
+2. In the **Widget Tree**, select **Card Front**. Customize the default **Container** or replace it with another widget that shows the content you want users to see first.
+3. Select the **FlippableCard** widget. In the **Properties Panel**, open **Flippable Card Properties** and enable **Edit Back of Card**.
+4. In the **Widget Tree**, select **Card Back**. Customize the default **Container** or replace it with another widget that shows the content users should see after the card flips.
 
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/bflCPrd9dwZZH7rrDDU4?embed&show_copy_link=true"
-        title=""
+    <iframe
+        src="https://demo.arcade.software/gzh0tAzumLsgveKcnlxR?embed&show_copy_link=true"
+        title="Add and configure a FlippableCard widget"
         style={{
             position: 'absolute',
             top: 0,
@@ -74,80 +73,30 @@ To add the FlippableCard widget:
 
 ## Customizing
 
-You can customize the appearance of this widget using the various properties available under the properties panel.
+Select the **FlippableCard** widget in the **Widget Tree**, then open **Flippable Card Properties** in the **Properties Panel**.
 
-### Changing flip direction
+### Editing the Back of the Card
 
-By default, this widget flips the card in the horizontal direction (i.e., from left to right and right to left).
+Enable **Edit Back of Card** to show and edit the back of the card on the **Canvas**. Disable it to return to the front. This option changes only which side is visible while editing; it does not affect the card's runtime behavior.
 
-To change the flip direction:
+### Changing the Flip Direction
 
-1. Select the **FlippableCard** widget from the widget tree or canvas area.
-2. Move to the properties panel, and scroll down to the **Flippable Card Properties** section.
-3. Find the **Flip Direction** dropdown and change it to **Horizontal** or **Vertical**.
+By default, the card flips horizontally. Use **Flip Direction** to choose one of the following options:
 
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/GnyuJgdxLVatkROyWGEk?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
-
-### Changing flip animation duration
+- **Horizontal:** Flips the card from left to right or right to left.
+- **Vertical:** Flips the card from top to bottom or bottom to top.
 
-When you tap on this widget, the flip animation completes in 400ms (milliseconds). You can change this duration if you wish to make it a little faster or slower.
+### Changing the Animation Duration
 
-To change the flip animation duration:
+The flip animation lasts `400 ms` by default. Set **Flip Animation Duration** to a shorter duration for a faster animation or a longer duration for a slower one. Enter the duration in milliseconds; for example, `1,000 ms` equals 1 second.
 
-1. Select the **FlippableCard** widget from the widget tree or canvas area.
-2. Move to the properties panel, and scroll down to the **Flippable Card Properties** section.
-3. Find the **Flip Animation Duration** property and change the value. Note: The value should be in milliseconds (e.g., 1000ms = 1 second).
+### Disabling Flip on Tap
 
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/BUNRQ05cQIv4eAW8QZpk?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+The card flips when tapped by default. Disable **Flip on Tap** if tapping the card should not switch between its front and back sides.
 
-### Disable flip on tap
+## Best Practices
 
-By default, the card flips when you tap on it. To disable this behavior, move to the **properties panel > Flippable Card Properties** > disable **Flip on Tap** toggle.
\ No newline at end of file
+- Use the same dimensions for the front and back sides and test dynamic content to ensure it does not overflow or get clipped.
+- Make it clear that the card is interactive by using a label, icon, or other visual cue.
+- Avoid placing essential information only on the back of the card.
+- Use a short animation duration so the interaction feels responsive.