Device Card Stack

Accordion-style card stack with 3D perspective and image preview panel.

Basic Usage

Three cards with images. Click a card to expand it and see the preview image on the right panel.

Breathtaking mountain views captured at golden hour. The peaks rise above the clouds creating a stunning natural spectacle.

Powerful ocean waves crash against the rocky shoreline. The deep blue waters stretch endlessly towards the horizon.

A winding path through an ancient forest. Sunlight filters through the canopy creating dappled patterns on the ground.

<device-card-stack> <div slot="card" data-title="Mountain Landscape" data-color="#1a1a2e" data-image="https://picsum.photos/id/29/600/400" data-num="01"> <p>Breathtaking mountain views...</p> </div> <div slot="card" data-title="Ocean Waves" data-color="#16213e" data-image="https://picsum.photos/id/37/600/400" data-num="02"> <p>Powerful ocean waves...</p> </div> <div slot="card" data-title="Forest Path" data-color="#0f3460" data-image="https://picsum.photos/id/15/600/400" data-num="03"> <p>A winding path through...</p> </div> </device-card-stack>

Custom Rotation

Increase the 3D rotation angle applied to inactive cards for a more dramatic perspective effect.

Rolling sand dunes under an expansive desert sky. The wind sculpts ever-changing patterns across the golden landscape.

Massive ice formations float silently in crystal-clear arctic waters, reflecting shades of blue and white.

Rugged volcanic terrain carved by ancient eruptions. Dark basalt contrasts with patches of resilient green moss.

<device-card-stack stack-rotation="5"> <div slot="card" data-title="Desert Dunes" data-color="#78350f" ...>...</div> <div slot="card" data-title="Arctic Ice" data-color="#164e63" ...>...</div> <div slot="card" data-title="Volcanic Terrain" data-color="#4a044e" ...>...</div> </device-card-stack>

Custom Transition Duration

Slow down the transition for a more deliberate animation effect (800ms).

A glittering city skyline illuminated by thousands of lights as dusk settles over the urban landscape.

A quiet country road stretches into the distance, flanked by golden wheat fields swaying in the breeze.

The Milky Way arches across a clear night sky, millions of stars creating a celestial tapestry overhead.

<device-card-stack transition-duration="800"> <div slot="card" data-title="City Skyline" data-color="#1e3a5f" ...>...</div> <div slot="card" data-title="Country Road" data-color="#2d4a22" ...>...</div> <div slot="card" data-title="Starry Night" data-color="#1a1a2e" ...>...</div> </device-card-stack>

CSS Custom Properties

Available CSS custom properties for styling the component.

Property Default Description
--dcs-border-radius 20px Border radius of the outer wrapper
--dcs-height 700px Height of the component in desktop mode
--dcs-preview-bg #000 Background color of the preview panel
--dcs-text-color #fff Text color for the card body title
--dcs-title-size 3.5rem Font size of the expanded card title