Case Studies landing

All five case studies above the fold

Seven ways to replace the stacked scroll with one view of all five typologies. Hover reveals the case study title and summary.

1 Index takeover

One full-bleed hero with the five typologies as a large type index. Hovering a word crossfades the whole background to that project and swaps the angled plate. The last one hovered stays.

Case Studies
{{ t.typeLower }}
{{ d.plate }}
2 Title list with floating preview

An editorial index of the five titles. A photo card follows the cursor and crossfades between projects, with the typology on an angled gold tag. From staff page option 1c.

Five typologies, one practice
Case Studies
{{ t.type }}
{{ t.title }}
{{ e.type }}
3 Horizontal strips

Five letterbox bands stacked like a section through the site. The hovered band opens tall and a gold plate with an angled edge slides in from the left with title and summary.

{{ t.type }}
{{ t.type }} Case Study
{{ t.title }}
{{ t.blurb }}
4 Hero tabs

Builds on the current carousel hero. The dots become five labeled tabs along the bottom edge; hovering one crossfades the hero, and that tab rises into a gold plate with an angled top.

Case Studies
Five ways we shape place
{{ t.type }}
{{ t.title }}
{{ t.blurb }}
5 Accordion panels

Five vertical slices fill the hero. The hovered one opens wide and an angled gold plate rises with the title. Collapsed slices keep their typology label.

{{ t.type }}
{{ t.type }} Case Study
{{ t.title }}
6 Spotlight, heading becomes the caption

From staff page option 1b. Five portrait tiles in a row; the others fade back and the page heading swaps to the hovered project's title, typology and summary.

{{ b.caption }}
7 Angled plate rise

From staff page option 1c's angled tag. A 2-over-3 mosaic; on hover the photo pushes in slightly and the angled gold plate rises from the bottom edge with the title and summary.

{{ t.type }}
{{ t.type }} Case Study
{{ t.title }}
{{ t.blurb }}