Skip to content

Flip Card Block

The Flip Card block creates an interactive card with a front and back side. Learners flip the card to reveal additional information on the other side.

Each side of the flip card can include:

  • Image - an optional image with crop support
  • Title - a heading for that side (default: “Front Side” / “Back Side”)
  • Subtitle - optional secondary text
  • Content items - nested text and image items

Edit each side using the front/back tabs in the block editor.

  • Horizontal (default) - card flips left to right
  • Vertical - card flips top to bottom
  • Click (default) - learner clicks to flip
  • Hover - card flips when the learner hovers over it
RatioDescription
4:3Standard proportion (default)
1:1Square
16:9Wide
AutoAdjusts to fit the content

Both sides share the same style setting: Default, Outlined, Elevated, or Filled.

The front side displays by default. The flip animation plays when the learner interacts with the card based on the trigger setting.