---
title: "EditorialCards — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Helen Statsevich · Cards. Interactive editorial cards moving in"
canonical: "https://framer.elliotli.dev/component/editorialcards"
---

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

# EditorialCards

Interactive editorial cards moving in

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

![EditorialCards preview image 1](https://framer.elliotli.dev/og/component/editorialcards/3fe51fdee5b923ad/1600x1200.jpg)

## Summary

Interactive editorial cards moving in

## Description

**Editorial Cards** is an interactive Framer code component that creates a layered editorial-style card experience with progressive reveal, hover motion, drag interaction, and flexible card positioning.

It is built for layouts where cards should feel tactile and alive rather than static. Cards can either start already visible on the canvas or appear partially from outside the frame, inviting interaction. Outside cards first **peek in**, then **fully reveal on click**, creating a staged storytelling effect.

## Key features

-   **Progressive reveal interaction**
    
    Cards can enter one by one instead of appearing all at once.
    
-   **Peek-from-edge behavior**
    
    Cards can start outside the canvas and peek in from any side.
    
-   **Click to reveal**
    
    Peeking cards expand into their full placed position when clicked.
    
-   **Custom card layout**
    
    Set individual card position, rotation, stacking order, and start behavior.
    
-   **Hover motion**
    
    Revealed cards can lift and scale slightly on hover for a more premium feel.
    
-   **Drag support**
    
    Cards can be dragged, making the composition feel tactile and dynamic.
    
-   **Focus through dimming**
    
    Non-hovered cards can fade back while the active card gets visual priority.
    
-   **Canvas-based workflow**
    
    Connect your own Framer layers/components directly into the card slots.
    

## Controls included

### Layout Settings

For each card, you can control:

-   **Start Location** — on canvas or outside
    
-   **X Position (%)**
    
-   **Y Position (%)**
    
-   **Rotation**
    
-   **Peek From** — left, right, top, bottom
    
-   **Z-Index**
    

### Animation

-   **Animation Duration**
    

### Hover

-   **Hover Lift**
    
-   **Hover Scale**
    

### Focus

-   **Dim Others**
    
-   **Dim Opacity**
    

## Best for

This component works best when you want a layout to feel:

-   editorial
    
-   layered
    
-   cinematic
    
-   tactile
    
-   less template-like
    
-   more art-directed and interactive
    

## Notes

-   Works with connected Framer component instances through the **Children / Cards** slot.
    
-   Best results come from using cards with varied sizes, image treatments, and slight rotation differences.
    
-   Ideal for hero sections and showcase blocks where visual rhythm matters.
    

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

-   All · #2012

## Details

- **Author**: Helen Statsevich
- **Price**: $10.00
- **Published**: 2026-04-27
- **Updated**: 2026-05-18
- **Added**: 2026-04-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