CaseStudyBody

Long-form case-study layout — hero figure, scroll-pinned process steps, expandable footnotes.

stable pattern #case-study#long-form#composition#scroll

No playground for "case-study-body".

Loading preview…

Usage

- Use for `/work/[slug]` case-study pages and any long-form authored content. - 3–5 process steps is the sweet spot — fewer feels thin, more loses momentum. - Use Expandables for footnotes / deep-dive details readers can choose to open. - Pair with EditorialHero above and a ContactCTA below.

Do / Don't

- **Do** name process steps as verbs ("Discover", "Build", "Ship") not nouns. - **Do** include a hero Figure — case studies without imagery feel hollow. - **Don't** put more than 3 Expandables in one page — they fragment the read. - **Don't** nest CaseStudyBody inside another article landmark.

Tokens

A11y

Hero figure has alt text + caption + lightbox. StackingCards collapses to a static stack under prefers-reduced-motion. Expandable disclosures use proper aria-expanded/controls. Document layout uses semantic <article> and <section> landmarks.

Source

src/components/CaseStudyBody.astro

CaseStudyBody

How it came together

Discover

Direction

Ship

Notes

Live playground

How it came together

Discover

Direction

Ship

Notes