Flip Card Block
Create interactive cards that flip to reveal content on hover or click, perfect for team profiles and feature showcases.
What is the Flip Card Block?
A three-block system for interactive flip cards:
- Flip Card Container – parent wrapper
- Flip Card Front – visible side
- Flip Card Back – revealed on flip
Key Features
- 4 flip effects (flip, fade, slide, zoom)
- Hover or click trigger
- Horizontal or vertical flip direction
- Customizable timing and easing
- Independent styling for front and back
- Touch support for mobile
How to Use
- Insert Flip Card block
- Flip Card Front and Back are auto-created
- Add content to front side (image, heading, etc.)
- Add content to back side (details, bio, CTA)
- Configure flip effect and trigger
Settings
Flip Card Container:
- Effect – Flip, Fade, Slide, Zoom
- Direction – Horizontal or Vertical flip
- Trigger – Hover or Click
- Duration – Animation speed (400-1000ms)
- Height – Card height (auto or fixed)
Front and Back:
- Background colors and images
- Padding and alignment
- Any inner content blocks
Common Use Cases
Team Member Cards
Front: Photo + Name + Title
Back: Bio + Social links + Contact
Product Features
Front: Icon + Feature name
Back: Detailed description + Benefits
Before/After
Front: Before image
Back: After image + Results
Best Practices
- Keep front simple and inviting to flip
- Use click trigger for mobile-first design
- Ensure back has clear CTA or information
- Use consistent card heights in grids
- Test on touch devices
- Add visual cue to indicate interactivity