Card Deck Tabs

Show Preview
Card Deck Tabs

About Card Deck Tabs

Perfect for editorial landing pages, service menus, pricing tiers, and portfolio showcases.

Card Deck Tabs turns a plain list into a layered deck. Every option stays visible as a stacked tab click one and it glides to the front, expanding into a full showcase panel with a heading, description, call-to-action, and image. It adds motion and hierarchy without burying your content.

Features

  • Every item stays visible, active item slides forward

  • Click / tap to switch, with smooth spring easing between layers

  • Two-column reveal panel: heading, body copy, CTA, and image per item

  • Set which item opens by default

  • Separate styling for active vs. stacked (inactive) layers

  • Optional icon or number per tab

  • Fully responsive (Coming soon)

  • Works with any number of items via a repeatable item list

Customizations

  • Item list: tab label, heading, body, CTA text + link, image (per item)

  • Colors: active layer, stacked layers, text, CTA ‹verify›

  • Typography: font, size, weight, transform for heading / body / label

  • Layout: card radius, overlap/peek distance, panel padding, image aspect ratio

Set up

  1. Add the Stacked Reveal component to your canvas

  2. Fill in the label, heading, body, CTA, and image for each item

  3. Style active vs. stacked layers to match your brand

After copying the component URL, paste it into your Framer project to import it.