---
title: "Morph Pill Card — Free Framer component · Best of Framer"
description: "Free Framer component · by vasp · Cards. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/morph-pill-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Morph Pill Card

# Morph Pill Card

Pill to Card on hover

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

![Morph Pill Card preview image 1](https://framer.elliotli.dev/og/component/morph-pill-card/5c7562b01961a1d0/1600x1153.jpg)

## Summary

Pill to Card on hover

## Description

Morph Image Pill is a customizable Framer component that transforms a compact image pill into a detailed content card on hover.

On hover, the pill expands smoothly to reveal supporting text, icon-based information, a longer description, and an optional call-to-action button. The progressive reveal keeps layouts compact while giving visitors access to more information when they interact.

Designed for profiles, products, projects, services, events, and other visual content, the component can be configured directly through Framer’s property controls without editing the internal structure.

### Features:

-   Smooth pill-to-card hover animation
    
-   Compact default state
    
-   Expanded image card layout
    
-   Custom title and image
    
-   Two supporting text fields
    
-   Two optional icon and text rows
    
-   Optional long description
    
-   Optional call-to-action button
    
-   Custom button link
    
-   Individual visibility controls
    
-   Adjustable content spacing
    
-   Fully customizable inside Framer
    
-   No code required
    
-   No extra setup required
    

### Customizable Controls:

-   Title
    
-   Image
    
-   Primary supporting text
    
-   Secondary supporting text
    
-   Supporting text visibility
    
-   First icon
    
-   First icon text
    
-   First icon row visibility
    
-   Second icon
    
-   Second icon text
    
-   Second icon row visibility
    
-   Description
    
-   Description visibility
    
-   Button label
    
-   Button visibility
    
-   Button destination link
    
-   Tertiary section spacing
    
-   Supporting text section spacing
    
-   Default and hover variants
    

### Best For:

-   Team member profiles
    
-   Portfolio introductions
    
-   Product previews
    
-   Project showcases
    
-   Service cards
    
-   Contact cards
    
-   Event previews
    
-   Property listings
    
-   Course cards
    
-   SaaS interfaces
    
-   Creative agency websites
    
-   Modern landing pages
    

For help or suggestions, contact [vaspdesigns@gmail.com](mailto:vaspdesigns@gmail.com)

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

-   All · #293

## Details

- **Author**: vasp
- **Published**: 2026-07-15
- **Updated**: 2026-07-15
- **Added**: 2026-07-15
- **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