---
title: "CustomFlipCard — Free Framer component · Best of Framer"
description: "Free Framer component · by Konstantin Nikolaev · Cards. Flip. Reveal. Impress."
canonical: "https://framer.elliotli.dev/component/customflipcard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/CustomFlipCard

# CustomFlipCard

Flip. Reveal. Impress.

[View on Framer](https://framer.com/marketplace/components/customflipcard/?via=elliot-li)

![CustomFlipCard preview image 1](https://framer.elliotli.dev/og/component/customflipcard/215dfbd0c438fc65/1600x1200.jpg)

## Summary

Flip. Reveal. Impress.

## Description

**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**

1.  Click "Get Component" on the Marketplace
    
2.  Open your Framer project
    
3.  Go to Assets → Marketplace → find FlipCard
    
4.  Drag onto your canvas
    
5.  Set width and height as needed
    
6.  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](https://konstantinfluence.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3010

## Details

- **Author**: Konstantin Nikolaev
- **Published**: 2026-04-14
- **Updated**: 2026-04-14
- **Added**: 2026-04-04
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator