What You'll Create

Transform a Squarespace List Section into a dramatic layered card interface where items stack on top of each other like fanned cards, each offset by a visible strip. Hovering over an item slides the cards in front out of the way to reveal the active item's full content area. The container fills 90% of the screen height, content sits at the bottom with generous padding, and the whole thing collapses gracefully to a standard stacked layout on mobile.

The Problem It Solves

Squarespace's List Section displays items in a simple vertical or grid layout with no interactive behavior. There's no native way to create a tabbed or stacked-card interface, and third-party tab plugins don't connect to List Section content. This technique turns native list items into layered, stacked panels that respond to hover — keeping all content editable directly in the Squarespace editor while delivering a high-end interactive experience.

Perfect For

Service offering reveals, Process step walkthroughs, Portfolio category previews, Team member spotlights, Case study navigation panels

What Makes This Different

Each list item is stacked with a calculated offset based on an 8rem strip width — so with 4 items, the backmost card peeks out at 24rem from the right edge. On hover, cards in front slide left by 20rem with a smooth 0.6-second animation and a custom easing curve for a polished, natural feel. The stacking order is automatically assigned so the first item sits on top. The container is set to 90vh height with a warm #e8e0d5 background, and each card gets its own background color, customizable per item. Below 767px, all positioning resets and items stack normally with 2rem padding — no awkward overlap on smaller screens. The script handles setup, hover activation, reset on mouse leave, and full recalculation when the browser window is resized.

Details

Section Type: Fluid Engine
Code Type: CSS + JavaScript
Prerequisites: List Section with Simple layout set to Inset width. Section anchor must contain layeredvtabs. JavaScript in footer code injection. 3–4 list items recommended.
Toolkit Title: Layered Vertical Tabs

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support

Get Access to Standout Squarespace →

Layered Vertical Tabs