---
title: "Team Card Flip — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Cards. A single, reusable team member card"
canonical: "https://framer.elliotli.dev/component/team-card-flip"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Team Card Flip

# Team Card Flip

Tilt, drag and flip team card

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

![Team Card Flip preview image 1](https://framer.elliotli.dev/og/component/team-card-flip/d26fa998ea65b8c2/1600x1200.jpg)

## Summary

A single, reusable team member card

## Description

## Features

-   **3D Tilt on Hover** — The card subtly rotates to follow the cursor, creating a tactile, dimensional feel.
    
-   **Physics-Based Dragging** — Grab and throw the card. It snaps back with spring physics and momentum.
    
-   **Click-to-Flip** — Tap to reveal a back side with the team member's bio or description.
    
-   **Fully Controllable** — Adjust tilt intensity, slide intensity, corner radius, shadow depth, aspect ratio, text size, and more — all from the property panel.
    
-   **CMS Ready** — Every field (name, role, image, bio) maps directly to Framer CMS, so you can scale your team page without duplicating components.
    
-   **Dark Gradient Mask** — An optional overlay keeps text readable over any image. Control the intensity with a slider.
    
-   **Verified Badge** — A subtle green checkmark badge you can toggle on or off per member.
    

## How to Use

1.  Drop the Team Card component onto your canvas.
    
2.  Customize the look using the property panel — set your aspect ratio, radius, shadow, and colors.
    
3.  To use with CMS: create a Team collection, add fields for name, role, image, and bio, then connect them to the component's properties.
    
4.  Duplicate or use inside a CMS-powered list to generate cards for your entire team automatically.
    

## Notes

-   Works best at card widths between 200–350px.
    
-   The 3:4 aspect ratio is the default and works well for headshots.
    
-   For a cleaner look, disable dragging and tilt — the flip interaction works great on its own.
    
-   All interactions are mouse-based and optimized for desktop. On mobile, the flip interaction is the primary interaction.
    

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

-   All · #5199

## Details

- **Author**: Francisc Toth
- **Published**: 2026-02-20
- **Updated**: 2026-09-14
- **Added**: 2025-10-22
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards