How it works FlipCard is a Framer component with a smooth horizontal flip animation. The front shows a title, the back reveals a description. Both sides are fully independent — different colors, images, fonts, text alignment and padding. Everything is controlled from the property panel, no code needed.
Setup
Click "Get Component" on the Marketplace
Open your Framer project
Go to Assets → Marketplace → find FlipCard
Drag onto your canvas
Set width and height as needed
Configure everything in the property panel
Flip Trigger Choose between Click or Hover. The hint text at the bottom of the card ("Click to flip" / "Hover to flip") automatically adapts to whichever trigger you select. You can also turn the hint off completely.
Backgrounds Both front and back support either a solid fill color or an uploaded image. Images are displayed as cover, always centered.
Title Badge An optional badge element for the front face — great for numbering cards (01, 02, 03) or adding a label. Independently configurable: text, font family, size, weight, color, letter spacing, line height, and horizontal alignment (left, center, right).
Typography Full font control for every text element — Front Title, Back Text, Title Badge, and Hint — each with their own font family, size, weight, color, letter spacing, and line height settings.
Text Alignment Set horizontal alignment (left, center, right) and vertical alignment (top, middle, bottom) independently for both the front and back face.
Padding Choose between uniform padding (all sides at once) or per-side control (top, right, bottom, left) — available separately for front and back.
Border Radius Apply a single radius to all corners, or control each corner individually (top left, top right, bottom right, bottom left).
Sizing The component uses Framer's native sizing — set width and height to Fill, Fixed, or Fit Content directly on the canvas. No fixed dimensions baked in.
Use Cases Problem/Solution sections — Team member cards — Feature highlights — Pricing tiers — Portfolio showcases — FAQ sections — Portrait cards with name and role
What's not included The component does not support scroll-based triggers or multi-step animations. Text only — no Framer components can be placed inside the card faces.
Built by Konstantin | konstantinfluence.com
Konstantin Nikolaev
