Case Carousel
Sourcecomponents/blocks/CaseCarousel.astro
The deck
A fanned deck of Case Cards under a heading — the active card upright and prominent, the neighbours angled behind, with prev / next arrows that rotate the deck. Built entirely from the Case Card component.
Switch viewport, or use the arrows in the preview to rotate the deck.
Built from
- Case Card — every card in the deck (tag, company, serif title, image, CTA)
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
heading | string | — | Section heading (supports <em> for a serif accent). |
cases | Case[] | — | The cards — {tag, company, title, image, cta, href}. Required. |
Usage
Pass your cases — the middle one starts active. Wrap an accent word in <em> for the serif twist. Zero-JS-framework: a small vanilla script rotates the deck.
<CaseCarousel
heading="Whole brand worlds, <em>built</em> with Alchemy"
cases={[
{ company: 'Tanner', title: 'A <em>newcomer</em> that earned real trust', image: '/img/tanner.jpg', href: '/work/tanner' },
{ company: 'Karin Muther', title: 'One clear <em>brand</em> from a whole story', image: '/img/karin.jpg', href: '/work/karin' },
]}
/>Rules
Do
Use it for a small, curated set of standout case studies.
Lead with your strongest story as the middle (active) card.
Don't
Load a dozen cards — a carousel hides all but the front few.
Use it for a browsable grid — that's a Work Card mosaic.