How It Works Section With Sticky Scroll Mockups
ProHow it works section with sticky step copy on the left, three scrolling product photos on the right, and a serif heading. Follows light and dark.
When to use How It Works Section With Sticky Scroll Mockups
Reach for this when the product has to be seen in three photographs, not named in a grid. The heading sits above. As the section scrolls, the left titles stay put. A black rule marks the live step and its sentence appears. The right column stacks three images at their native ratio. Pass your own image on each step before this ships.
Skip it when the stages are dates and durations. That is the zigzag timeline. Skip it when the steps are notes on a wall. Those do not pin. Replace the Dia copy and the three sentences before this ships. Keep the sticky column. Setting both columns to scroll together removes the reason this layout exists. The section follows light and dark.
Block details
- Category
- How It Works Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 177 lines, 6 KB in one file
- Install
wensity add how-it-works-section-with-sticky-scroll-mockups --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- light, dark, how it works, sticky, scroll, mockup
- Last updated
