---
title: "Notched Tabs Deck — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Navigation. Morphing Panels"
canonical: "https://framer.elliotli.dev/component/notched-tabs-deck"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Notched Tabs Deck

# Notched Tabs Deck

Morphing Panels

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

![Notched Tabs Deck preview image 1](https://framer.elliotli.dev/og/component/notched-tabs-deck/3b4072ae90c979a5/1600x1195.jpg)

## Summary

Morphing Panels

## Description

[Live Preview](https://notchedtabdeck.framer.website/)

[Grab more components for free](https://www.framer.com/@design-by-saqlain/)

A flexible Framer component for pairing detailed content with visuals in a compact, interactive layout. Visitors click each panel to reveal its description while a matching image or video updates on the other side — all while the rest of the list stays neatly collapsed. Use it for features, services, products, portfolios, processes, or any section where text and visuals need to work together without overwhelming the page.

## Interactive Experience

Click a panel to expand its description and swap the paired image.

Smooth, spring-based opening, closing, and crossfade animations.

Optional caption overlay on the image side.

Add an image, or fall back to a solid color per panel.

Switch between a side-by-side desktop layout and a stacked mobile layout.

Ideal for features, services, product tours, FAQs, and portfolios.

### **Fully Customizable**

Split Accordion includes Framer property controls for customizing content, typography, colors, spacing, shape, and icon size — so it can be fully matched to your site's design without touching code.

### **Customize**

Panels — Add, remove, and reorder panels, each with its own title, description, link, image, or fallback color.

Header — Show or hide the eyebrow and heading together; when hidden, both the stack and the image auto-center.

Typography — Customize fonts, sizes, and weights for the heading, row titles, body copy, and captions, with a max-width control for the heading.

Colors — One consolidated palette control for background, accent, ink, muted, and divider colors, plus the image panel's background.

Animation — Choose smooth, snappy, bouncy, or fully custom spring settings.

### **How It Works**

The component displays a list of collapsible panels next to a floating image or video card. When a visitor clicks a panel, its description expands while the paired media crossfades into view — and on mobile, the media stacks directly above whichever row is open.

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

-   All · #4207

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-08-28
- **Updated**: 2026-11-04
- **Added**: 2026-08-28
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation