Case Studies 8 block design & features
A container holds the section heading, description, and previous/next arrow buttons built with shadcn/ui. Below, a carousel displays case study cards at one-third width each on medium breakpoints and up, so three cards are visible simultaneously. Arrows and dots advance the track by exactly one card at a time. Each card is a linked poster panel with a portrait 3×4 aspect, company logo, and title over darkened photography. No edge fade masks are applied.
The layout reads like a gallery wall of tall frames. Photography fills each card while a bottom-up gradient lifts white text into view. Rounded corners and a hover zoom provide subtle depth and interaction cues. Dot pagination maps to each scroll snap position rather than groups, so users can step through every item individually.
Visually restrained and grid-like compared to the masked variant. The lack of edge fades and the fixed three-column density give it a tidier, more predictable rhythm. Complexity is low: one carousel track with per-card snaps, no state beyond the scroll position.
On small viewports each card fills the full width and the carousel becomes a standard one-at-a-time strip. The dots adjust to match the number of available snaps at the current breakpoint.