---
title: "Progress Cards — Free Framer component · Best of Framer"
description: "Free Framer component · by RaDe Creatives · Cards. Showcase your agency’s process with this interactive 3-step progress card component."
canonical: "https://framer.elliotli.dev/component/progress-cards"
---

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

# Progress Cards

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

![Progress Cards preview image 1](https://framer.elliotli.dev/og/component/progress-cards/8b2046fc0708ee55/1600x1200.jpg)

## Summary

Showcase your agency’s process with this interactive 3-step progress card component.

## Description

Showcase your agency’s process with this interactive 3-step progress card component. Designed for design and development studios, it visually represents your workflow from discovery to launch.

On desktop and tablet, three horizontal cards animate sequentially with a vertical progress bar. As each card completes, the next card automatically expands while the previous collapses, creating a smooth, story-like transition through your process.

Each card includes:

-   Step number (01, 02, 03)
    
-   Card title
    
-   Short description text
    
-   Optional tag or subtext
    
-   Image placeholder (project preview, mockup, or icon)
    

Once the third card completes, the loop restarts seamlessly from the first step.

On mobile, all three cards are displayed vertically, fully expanded, and without progress animation for an easy scroll experience.

-   Design or development agency process section
    
-   Project timeline or workflow showcase
    
-   Product or service journey visualization
    

**Customizable Controls:**

-   Card titles, descriptions, and images
    
-   Progress color and animation speed
    
-   Loop toggle
    
-   Text and background colors
    
-   Layout spacing and radius
    

**Responsive Behavior:**

-   **Desktop & Tablet:** 3 cards aligned horizontally with auto progress and expansion
    
-   **Mobile:** Cards stacked vertically, fully expanded
    

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

-   All · #249

## Details

- **Author**: RaDe Creatives
- **Published**: 2025-10-09
- **Updated**: 2025-10-09
- **Added**: 2025-10-03
- **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