React how it works section components
A how it works section has to name the stages of the job. These blocks print the dates, the durations, and the path between the cards so the visitor is not left reconstructing a process from four disconnected tiles.
Built with the stack you already ship
How it works blocks you can copy
Each block is one file covering the intro and the step cards. Preview it live, then copy the source into your project.
How It Works Section With Zigzag TimelineHow it works section with a project dates header, four staggered step cards, vertical duration tags, and dashed zigzag connectors. Follows light and dark.
How It Works Section With Taped Sticky NotesHow it works section with four tilted sticky notes, washi tape, numbered steps, and a what's next heading. Follows light and dark.
How It Works Section With Dotted Curve StepsHow it works section with a centered heading, three illustrated step cards, and a dotted curve joining the mockups. Follows light and dark.
How It Works Section With Sticky Scroll MockupsHow 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.
How It Works Section With Pinned Notebook NotesHow it works section with six pushpin notes on lined paper, a dashed zigzag path, and red, green, yellow, and blue steps. Follows light and dark.
Surfaces that sit beside a process
Feature and contact from the same library, for the page that has already named the stages and now has to prove the product or take the brief.
Feature Section With Security GridAdaptive feature section with WebGL side rays, two hero-style CTAs, and a six cell bordered matrix of security controls with original hairline icons.
Feature Section With Workspace ComposerAdaptive AI workspace feature with copy and bullets on the left, a chat composer on one blurred still with Calendar Meet and Drive chips, and three product claims below.
Feature Section With Gradient Product CardsAdaptive three card feature section with a left aligned headline, sea glass and lilac gradient panels of coded product UI, and a full bleed photograph in the middle card.
Feature Section With Media Upload StageStacked ingest feature: compact empty dropzone on a blurred still, then three proof mockups for page read, plate hold, and cut index. Heading, CTAs, and claims sit around the tray.
Feature Section With Blurred Prompt StageAdaptive split feature section with a serif headline, a one-open accordion of desks, and a tall blurred photograph carrying a live prompt card.
How to choose a how it works section
A how it works section names the stages in order. It is not a feature grid. By the time someone reads it they already know the category. The job is to show how long each stage takes and how one stage leads to the next. If the cards are not joined, the visitor will read four products instead of one process.
How It Works Section With Zigzag Timeline is the staggered case study. Project Details sits in a lime pill. The heading and lede sit on the left. Jul and Aug sit as adjacent tiles on the right, with a lime square stacked on the later month. Four cards snake left, right, left, right. Each card keeps a vertical duration tag, an icon, a numbered title, and one sentence. Dashed elbows join the cards.
How It Works Section With Taped Sticky Notes is the wall after the sprint. So, what's next sits in the middle. Four portrait cards tilt left and right. A torn tape strip pins each one. Rose, mint, gold, and cyan wash the numbers. One sentence names the next step. There are no dates and no durations.
How It Works Section With Pinned Notebook Notes is the landing page map. Lined paper sits behind six square notes. A dashed curve snakes through translucent pushpins. The notes alternate left then right. Red, green, yellow, and blue distinguish the stages. Each card keeps a large number, a short title, and one sentence about a page section.
How It Works Section With Sticky Scroll Mockups is the product walkthrough. The heading sits above. Three titles stick on the left. A black rule marks the live step. The right column stacks three photographs at their native ratio. Scroll drives the active step. Pass your own image on each step before this ships.
How It Works Section With Dotted Curve Steps is the three step drawing. How it works sits in the middle. A grey dotted curve joins a signup card, a MacBook mockup, and a phone mockup with a check. The titles and sentences sit under the drawings. Create Account, Upload Data, and Access Anywhere are the sample stages. The red on the button, the upload arrow, and the check is the accent.
Replace the demo copy before this ships. On the zigzag, the heading, the month labels, the durations, and the four sentences are samples. On the taped notes, the four next steps are samples. On the pinned notebook, the six landing page labels are samples. On the sticky mockups, the Dia heading and the three sentences are samples. On the dotted curve, the heading and the three sentences are samples. Swap them for the stages you can stand behind on a call.
Keep the lime dates and the forest tags on the first and last cards. Matching every tag in the same green hides the start and the end. Keep the dashed path. A straight numbered list is a different block, and this layout exists because the path has to turn.
Do not stack two how it works blocks on one page. Pick the zigzag when elapsed time is the point, the taped notes when the next steps sit as notes after a sprint, the pinned notebook when six page sections have to read as a map, the sticky mockups when the product has to be seen in three photographs, or the dotted curve when three stages need drawings instead of photos. A second process row usually means the team could not agree which stages to cut.
The taped notes follow light and dark. Card frames turn near black. The rose, mint, gold, and cyan washes stay, just quieter. Flattening the tilts and dropping the tape in dark mode removes the reason this layout exists.
The pinned notebook follows light and dark. The ruled sheet stays. Card frames turn near black. Red, green, yellow, and blue washes stay, just quieter. Dropping the pins or the dashed snake in dark mode removes the reason this layout exists.
The sticky mockups follow light and dark. The live rule inverts. Keep the pin. If both columns scroll together, this is just three stacked cards.
The dotted curve follows light and dark. The red stays red. The drawings stay drawings. Dropping the curve or the mockups turns this into a generic three column list.
The zigzag follows light and dark too. Lime tiles stay lime in both. Pale cards become a faint white wash on black. Ink duration tags invert so they still read as the spine of the card. Do not drop the lime, or the dates disappear into the header.
The vertical tags are part of the card, not badges floating beside it. Keep the forest fill on Research and Final Delivery. Keep the ink fill on Visual Design and Prototype and Test. Rotating the duration with writing mode is what makes the tag read as a spine. Setting it as a normal label on top of the card turns this back into a generic step list.
Wire the months to a project you actually shipped. Jul 2025 and Aug 2025 are demo tiles. An agency page that still says those months after the work closed in March will be read as stock. The lime square on the later month is the only accent in the header. Do not add a third date.
Icons stay as line drawings. A photograph in the card fights the duration tag. If a stage needs a screenshot, that stage belongs in a feature section, and this block should name the remaining stages only.
