Design Pattern
Recipe Carousel Design
A horizontally scrollable card strip for showcasing curated recipes with smooth overflow handling and progressive disclosure of metadata.
Structure
The carousel uses a single-row flex container with overflow-x-auto. Each card is locked at a fixed minimum width via min-w-[200px] and prevented from shrinking with flex-shrink-0.
Visual Hierarchy
A gradient placeholder sits above the title and metadata row. The violet-to-pink gradient reinforces the Meridian brand palette while keeping the card lightweight. Metadata sits in muted gray to avoid competing with the recipe name.
Scroll Behavior
Native touch and trackpad scrolling is preserved. On desktop, a thin custom scrollbar appears during interaction. No JavaScript event handlers are required — the pattern is pure CSS-driven.