---
title: "Glassdrop Cards — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Liubomyr Yurchyshyn · Cards. Liquid Glass Cards that feel alive"
canonical: "https://framer.elliotli.dev/component/glassdrop-cards"
---

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

# Glassdrop Cards

Liquid Glass Cards that feel alive

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

![Glassdrop Cards preview image 1](https://framer.elliotli.dev/og/component/glassdrop-cards/2ac70e747c1e3d29/1600x1200.jpg)

## Summary

Liquid Glass Cards that feel alive

## Description

**✦ What's included**

3 Liquid Glass card variants inspired by Apple's material design language. Each features cursor-tracking glow, magnetic hover pull, and press animations — built as one cohesive glass system that pairs with Glassdrop Buttons.

**🧩 Variants**

-   **Basic** — text-first card with accent divider line and optional CTA. Clean, minimal, works on any background
    
-   **Media** — full-bleed cover image with gradient overlay, eyebrow label, and automatic color grading
    
-   **Icon** — floating semantic badge above the glass surface for categorized or status-driven content
    

**✦ Animations**

Hover activates a glow that follows your cursor across the glass surface, paired with a subtle magnetic pull toward the pointer — making the card feel physical and responsive.

**🎨 Customization**

Every card exposes these properties directly in Framer:

-   **Variant** — switch between Basic, Media, and Icon
    
-   **Accent Color** — one token repaints eyebrow, divider, CTA, and icon badge simultaneously
    
-   **Eyebrow Text** — category or content type label
    
-   **Show Eyebrow** — toggle the label on or off
    
-   **Title / Description** — main content slots
    
-   **Thumbnail** — cover image for Media variant
    
-   **Icon** — badge icon for Icon variant
    
-   **Has Button** — show or hide the CTA
    
-   **Button Label** — custom CTA text
    
-   **Button Icon** — any Material Symbol name
    
-   **Button Link** — connect to any URL
    

**🔍 Finding icons**

Browse thousands of icons at [fonts.google.com/icons](http://fonts.google.com/icons) — search for what you need, click on it and copy the name. Example icon names: `arrow_forward`, `star`, `bookmark`, `surfing`, `info`, `check_circle`, `trending_up`.

**🚀 How to use**

1.  Purchase and open the Framer remix link
    
2.  Copy the component to your project
    
3.  Set your Accent Color via the property panel
    
4.  Choose a variant and fill in your content
    
5.  Drop into any frame — interactions work on publish
    

**⚙ Requirements**

Framer — any plan. No plugins or external dependencies.

Part of the Glassdrop system. Pairs with Glassdrop Buttons.

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

-   All · #7756

## Details

- **Author**: Liubomyr Yurchyshyn
- **Price**: $12.00
- **Published**: 2026-07-02
- **Updated**: 2026-07-13
- **Added**: 2026-07-02
- **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