Workflow Walkthrough
Three mini screens joined by arrows following one item from new to sent.
Three mini screens joined by arrows following one item from new to sent.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Workflow Walkthrough follows one object through the product. Three mini screens sit in a row joined by arrows, each a small framed card whose corner chip advances the state, new, drafting, sent, with the chip styling escalating from muted to tinted to solid primary. The captions narrate the same journey in three short lines, and the middle one quietly claims the automation.
The stages are one typed array of caption, chip, and skeleton row widths. The chip progression is the storytelling spine, it shows state moving without a single word of UI copy. Arrows hide on mobile where the cards stack.
Reach for this block when your product processes things, replies, orders, tickets, documents, and the pitch is how little of the journey needs a human. Following one item is more concrete than describing the pipeline in aggregate, which is pipeline-flow territory. The three screen budget forces the story to its essence.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a customer reply from inbox to sent. Other journeys:
Tip: make the middle chip the automated one, human, machine, human reads as augmentation while machine everywhere reads as replacement.