How It Works Section With Taped Sticky Notes
ProHow it works section with four tilted sticky notes, washi tape, numbered steps, and a what's next heading. Follows light and dark.
When to use How It Works Section With Taped Sticky Notes
Reach for this when the next steps after a sprint have to feel like notes on a wall, not a timeline. So, what's next sits in the middle. Four portrait cards tilt left and right. A torn tape strip pins each card. The number sits large in a wash of rose, mint, gold, or cyan. One sentence names the step.
Skip it when the stages need durations, dates, or a dashed path. That is the zigzag timeline. Skip it when each step needs a screenshot. Replace the four sentences before this ships. Keep the tilts and the tape. Setting every card straight and tapeless turns this into a generic four column grid. 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
- 206 lines, 7 KB in one file
- Install
wensity add how-it-works-section-with-taped-sticky-notes --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 notes, tape, next steps
- Last updated
