---
title: "Spread Cards — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Aidan Looker · Cards. What is Spread Cards?"
canonical: "https://framer.elliotli.dev/component/spread-cards"
---

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

# Spread Cards

Stacked cards that fan out on hover.

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

![Spread Cards preview image 1](https://framer.elliotli.dev/og/component/spread-cards/30b9b1fecef7ef09/1600x1200.jpg)

## Summary

What is Spread Cards?

## Description

## What is Spread Cards?

Spread Cards is an interactive card stack component that elegantly fans out when hovered, revealing each card in a smooth, layered spread. Cards sit in a natural pile with subtle rotation cues, then animate into a full fan with configurable spacing and rotation. Built for portfolios, creative showcases, team pages, and product highlights where visual impact matters. Supports up to 8 cards with full image, text, and CTA customisation.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Stacked-to-spread animation with configurable fan distance, rotation, speed, and easing curves (Smooth, Snappy, Bouncy)
    
-   Drag-to-reorder interaction — grab any card and drag it to a new position in the deck, or flick it to the back
    
-   Optional CTA button per card with a premium slide-fill hover animation, link support for internal and external navigation
    
-   Independent font controls for Title, Body, Label, and Button — full typographic flexibility from the properties panel
    

## Controls inside Framer

### Cards

-   Image (Responsive Image with alt text)
    
-   Label, Title, Subtitle, Description
    
-   Button Text and Button Link (native Framer Link)
    
-   Up to 8 cards per stack
    

### Layout

-   Card Width (150–500 px)
    
-   Card Height (200–700 px)
    

### Colors

-   Text, Label Background, Label Text, Gradient Overlay
    

### Card Style

-   Border Radius, Shadow Intensity, Gradient Strength
    

### Button Style

-   Show/Hide toggle, Border and Fill colour, Text colour, Border Radius
    

### Animation

-   Spread Gap (40–300 px), Rotation (0–15 degrees), Speed (Fast, Medium, Slow), Easing (Smooth, Snappy, Bouncy)
    

### Interaction

-   Drag to Reorder toggle
    

### Typography

-   Title Font, Body Font, Label Font, Button Font
    

## Best use cases

-   Portfolio and photography showcases — fan out project thumbnails with elegant titles and "View Project" CTAs
    
-   Team or people sections — stack team member portraits that reveal on hover with name, role, and bio
    
-   Product or feature highlights — present a curated selection of items in a compact, interactive card deck
    
-   Event or gallery previews — display event photos in a stacked layout that invites exploration
    

Present content that rewards curiosity. Drop it in, configure your cards, and let the interaction do the storytelling.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).

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

-   All · #8330

## Details

- **Author**: Aidan Looker
- **Price**: $7.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-09
- **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