Split With Flow Diagram
Feature copy and a checklist beside an SVG automation flow with a trigger, condition, and branches.
Feature copy and a checklist beside an SVG automation flow with a trigger, condition, and branches.
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
Split With Flow Diagram is a two column feature section. The left column holds a heading, a paragraph, a three item checklist, and a CTA button. The right column is a bordered panel with an SVG flowchart: a filled trigger node, a condition card with a supporting line, and two action nodes joined by curved connectors with arrowheads and yes or no branch labels. Every shape uses theme tokens, so the diagram inverts cleanly in dark mode.
The diagram is one SVG with plain coordinates, and all of its copy is SVG text elements, so relabeling the flow means editing strings while the geometry stays put. The checklist and button label live in the copy column as ordinary strings. The viewBox keeps the diagram responsive down to tablet widths, where the columns stack with the copy first.
Reach for this block when the feature you sell is logic: automations, workflows, routing, or anything with a branch in it. A diagram proves legibility in a way prose cannot, the visitor reads the actual flow and thinks I could build that. It beats split-with-app-window when the canvas matters more than the chrome, and accordion-with-preview when you have one flagship capability rather than several.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a lifecycle email journey with an engagement branch. Other flows that fit the same three node shape:
Tip: keep the condition phrased as a question a marketer would ask, the diagram persuades because it reads like thought, not like code.