Components

Slides Stack

Scroll-linked stack: .wckd-slides + .columns; each slide is a .column. Sticky/scrim behaviour is CSS in wckd-ui-components.css; pairing rules live in design.md.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring 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

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

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