Slider Grid

A one-card-at-a-time carousel with a vertical fade-and-slide transition. Wraps any existing card component — each slide holds one card, navigation buttons appear automatically.

Live example

Workshop Methodology

A proven approach to strategic innovation

Cross-functional teams solve complex business challenges through structured creativity. Each session is facilitated to ensure actionable outcomes — not just a slide deck.

Strategy Sprint

5-day intensive programme

Five days that compress a quarter's worth of strategic thinking into a single working week — teams emerge with a tested hypothesis and a roadmap.

<div class="slider-grid" data-slider-grid>
<div class="slider-grid__slide">
<div class="side-image-card side-image-card-animate dck-surface dck-surface--rounded-lg dck-hover-lift">
<div class="side-image-card-header dck-text-block">
<h2 class="side-image-card-title">Workshop Methodology</h2>
<h4 class="side-image-card-subtitle">A proven approach to strategic innovation</h4>
</div>
<div class="side-image-card-body dck-text-block">
<div class="side-image-card-image"><img src="/images/Portfolio/Emlyon-BCO-Digitization.jpg" alt="Workshop session"></div>
<div class="side-image-card-text"><p>Cross-functional teams solve complex business challenges through structured creativity. Each session is facilitated to ensure actionable outcomes — not just a slide deck.</p></div>
</div>
<div class="v-space v-space--card-bottom"></div>
</div>
</div>
<div class="slider-grid__slide">
<div class="side-image-card side-image-card-right side-image-card-animate dck-surface dck-surface--rounded-lg dck-hover-lift">
<div class="side-image-card-header dck-text-block">
<h2 class="side-image-card-title">Strategy Sprint</h2>
<h4 class="side-image-card-subtitle">5-day intensive programme</h4>
</div>
<div class="side-image-card-body dck-text-block">
<div class="side-image-card-image"><img src="/images/Portfolio/Emlyon-BCO-Purpose.jpg" alt="Strategy sprint"></div>
<div class="side-image-card-text"><p>Five days that compress a quarter's worth of strategic thinking into a single working week — teams emerge with a tested hypothesis and a roadmap.</p></div>
</div>
<div class="v-space v-space--card-bottom"></div>
</div>
</div>
</div>

Element / attribute	Purpose
`slider-grid` + `data-slider-grid`	Outer container — the attribute activates the slider JavaScript
`slider-grid__slide`	One wrapper per slide; paste any card component inside (Side Image Card, Basic Card, …)

Shows one card at a time; Next drops the new card in from above, Prev rises in from below. The height animates between differently sized cards. The round Prev/Next buttons are added automatically.