Components

Slides Stack

Sticky, scroll-linked stacks built with .wckd-slides: cards scale and recede as the user moves down the page, suited to onboarding stories and stepped marketing narratives.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Basic slide stack

Wrap cards in .wckd-slides; each slide remains a normal .column so spacing and surfaces reuse the grid utilities you already use elsewhere.

Card 1

Bottom cards scale up as you scroll.

Card 2

Progressive reveal keeps focus on the current step.

Card 3

Final state resolves to the active narrative card.

Markup

<section>
  <div class="wckd-slides columns count-1 gap padded filled-fade rounded">
    <div class="column"><div class="pad"><h3>Card 1</h3><p>Step text.</p></div></div>
    <div class="column"><div class="pad"><h3>Card 2</h3><p>Step text.</p></div></div>
    <div class="column"><div class="pad"><h3>Card 3</h3><p>Step text.</p></div></div>
  </div>
</section>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Core behaviour

Only one scroll-driven stack behaviour ships in the kit, tune card count and content, not alternate motion engines.

Markup

<section>
  <div class="wckd-slides columns count-1 gap padded filled-fade rounded">
    <div class="column"><div class="pad"><h3>Card 1</h3><p>Step text.</p></div></div>
    <div class="column"><div class="pad"><h3>Card 2</h3><p>Step text.</p></div></div>
    <div class="column"><div class="pad"><h3>Card 3</h3><p>Step text.</p></div></div>
  </div>
</section>

When to use

  • Use slides for step-driven narratives where sequence matters more than density.
  • Use this pattern for onboarding, campaign stories, and rollout explanations.
  • Use concise card content so scroll progression feels intentional and readable.

Implementation notes

  • Keep slide count reasonable; very long stacks can feel heavy on smaller devices.
  • Use concise copy in each card so progression feels quick and readable.
  • Test reduced-motion handling when adding custom transitions.

Developer checklist

  • Wrap cards in .wckd-slides and keep cards as direct .column children.
  • Use a region wrapper like .wckd-slides-region when you want more scroll runway.
  • Validate behaviour on smaller screens and with prefers-reduced-motion enabled.

← All components