Device Card Stack

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