---
title: "Smart Card Timeline — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Minjoo Kim · Sections. Fully customizable media timeline"
canonical: "https://framer.elliotli.dev/component/smart-card-timeline"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Smart Card Timeline

# Smart Card Timeline

Fully customizable media timeline

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

![Smart Card Timeline preview image 1](https://framer.elliotli.dev/og/component/smart-card-timeline/85654f1b370823d4/1600x1200.jpg)

## Summary

Fully customizable media timeline

## Description

**About this Component**

Turn your static list into an engaging story.

The Interactive Hover Timeline is designed to make your history, roadmap, or career path pop. It’s built to be completely flexible, allowing you to match your brand’s look and feel perfectly without touching a line of code.

✨ **Key Features**

-   Smooth Hover Interaction: Cards elegantly reveal themselves when you hover over the timeline points.
    
-   100% Customizable: You have control over everything. Change colors, adjust gaps, resize dots, tweak border widths, and fine-tune typography to fit your design system.
    
-   Rich Media Support: Make it alive! Supports both static Images and auto-playing Videos (MP4/WebM) inside the cards.
    
-   Smart Layout: Easily position cards on the Left or Right side of the timeline.
    
-   Responsive & Clean: Optimized logic ensures it looks great and works smoothly.
    

⚙️ **Customization Options**

-   Global Styling: Backgrounds, Line Colors, Shadow Intensity.
    
-   Typography: Custom fonts, sizes, and colors for Years, Titles, and Descriptions.
    
-   Layout: Adjust Vertical Gaps, Card Widths, Padding, and Corner Radius.
    
-   Media: Toggle between "Original Ratio" or "Crop" mode for your images and videos.
    

⚠️ **Important Note on Links**

To ensure a smooth editing experience in Framer:

-   In Canvas & Preview: Links are disabled (silent) so you can edit and view without accidental navigation.
    
-   On Published Site: Links work perfectly. Just publish your site to test the navigation!
    

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

-   All · #8294

## Details

- **Author**: Minjoo Kim
- **Price**: $5.00
- **Published**: 2026-02-04
- **Updated**: 2026-02-04
- **Added**: 2026-01-23
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove