---
title: "CMS PREVIEW — Free Framer component · Best of Framer"
description: "Free Framer component · by KravDzin · Cards. Interactive CMS Preview Card Designed for seamless content presentation, this Framer CMS card component delivers an engaging user experience…"
canonical: "https://framer.elliotli.dev/component/cms-preview"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/CMS PREVIEW

# CMS PREVIEW

SMOOTH CMS PREVIEW

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

![CMS PREVIEW preview image 1](https://framer.elliotli.dev/og/component/cms-preview/1d5dfc3e5aff9287/1600x948.jpg)

## Summary

Interactive CMS Preview Card Designed for seamless content presentation, this Framer CMS card component delivers an engaging user experience by combining a compact default state…

## Description

**Interactive CMS Preview Card**

Designed for seamless content presentation, this Framer CMS card component delivers an engaging user experience by combining a compact default state with a fully expandable detail view.

\---

**Card Structure & Layout**

\* **Header & Media Canvas:** Features a high-impact preview image container with automatic ratio scaling, built to showcase project thumbnails, hero images, or category banners.

\* **Primary Metadata Bar:** Houses the primary title, publish date, category tag, and quick-action icons for instant context.

\* **Accordion Body:** The core expandable container that holds the condensed excerpt in its idle state and smoothly transitions to reveal the full multi-LINE description upon user interaction.

\* **Action Footer:** Features a dedicated, customizable "View Project" or "Read Article" button designed for direct routing to the target CMS item page.

\---

**Interactive Behavior**

\* **Click-to-Expand Toggle:** Clicking anywhere on the card's body triggers a smooth, spring-animated expansion, revealing the complete item description without requiring a page reload.

\* **Direct CMS Navigation:** The primary view button operates independently of the toggle, allowing users to jump straight to the dedicated CMS dynamic page instantly.

\* **Hover & Focus States:** Integrated micro-interactions provide tactile visual feedback, including subtle image scaling and depth shifts when hovering.

\---

**Customization Controls**

\* **Dynamic Image Property:** Swap the visual canvas directly through your CMS field mapping or property controls.

\* **Editable Copy Fields:** Customize titles, subtitles, tags, excerpt length, and full-body descriptions seamlessly.

\* **Custom Link Destination:** Bind the primary button to your collection's dynamic path (e.g., `/works/:slug`) or any custom external URL.

\* **Styling & Theme Variables:** Adjust border radius, padding, background blur, and color tokens directly in the Framer canvas panel.

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

-   All · #6613

## Details

- **Author**: KravDzin
- **Published**: 2026-09-12
- **Updated**: 2026-09-12
- **Added**: 2026-09-12
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards