Split With Flow Diagram

About this block

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.

When to use

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

• Features in a broader grid so this section can go deep on one capability

After

• How It Works to show setup in three steps
• Pricing once the power is established

What you can display

One strong use is a lifecycle email journey with an engagement branch. Other flows that fit the same three node shape:

• Lead routing. Form submitted, score above threshold, assign to sales or start nurture.
• Support triage. Ticket created, priority check, page the on call or queue for morning.
• Billing recovery. Payment failed, retry succeeded, thank the customer or open a dunning sequence.

Tip: keep the condition phrased as a question a marketer would ask, the diagram persuades because it reads like thought, not like code.