Pipeline Flow

About this block

Pipeline Flow opens with a centered heading and a short subline, then renders an inline SVG diagram of four rounded rectangles connected by arrow lines. Each box holds a small stage number set in tabular figures and a bold label: Plan, Create, Approve, Launch. Below the diagram sits a three column grid where each column pairs a short heading with a sentence of supporting copy that elaborates on the stages.

The heading and subline text are independent of the diagram, so you can reframe the narrative without touching the SVG. The three column explanations map loosely to the four stages and can be rewritten to match any workflow. Stage numbers and labels live in a small list, so renaming them is a quick edit, but each stage also carries a fixed horizontal position inside a fixed width drawing area, so adding or removing a stage means recomputing those positions rather than just editing the list.

When to use

Reach for this block when you need to communicate a linear production pipeline at a glance, particularly for creative agencies or studios where clients want to understand how a project moves from brief to delivery. The SVG flow gives it an advantage over plain numbered lists because the connected boxes make sequence and handoff unmistakably clear, while the column explanations below give each phase a short written rationale without crowding the diagram.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to introduce the service and set expectations before explaining the process
• Horizontal Connected instead, if each step needs a sentence of description rather than a single word label

After

• Testimonials from clients who have moved through the pipeline, reinforcing the process with real outcomes
• A CTA inviting visitors to start a brief or book a discovery call

What you can display

The layout works for any workflow that moves through discrete, ordered stages. A few ways to apply it:

• A client delivery process. Show the stages from brief intake through concept, revision, and final handoff so prospects understand what to expect before signing on.
• A campaign production cycle. Map planning, content creation, internal approval, and launch as a clear sequence that reassures marketing teams the process is structured.
• A software release pipeline. Label the stages design, build, review, and ship to give stakeholders a single view of how work moves from idea to production.

Tip: keep stage labels to one short word each so the SVG boxes stay readable at every viewport width without the diagram overflowing.