Centered With Integration Diagram
A centered hero above a hub and spoke diagram of six integration chips around an Acme node.
A centered hero above a hub and spoke diagram of six integration chips around an Acme node.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Centered With Integration Diagram is a centered hero with a hub and spoke graphic under the copy. The headline, lede, and two CTAs sit above a diagram of six integration chips arranged around a filled Acme node, joined by dashed curved paths drawn in a decorative SVG layer. The chips are bordered pills with lucide icons, the hub is a primary colored card, and every stroke uses theme tokens, so the whole diagram inverts cleanly in dark mode. The hero ships without its own header.
The six integrations are a plain array of label and icon pairs, so swapping categories means changing imports and strings, not geometry. On small screens the connector SVG hides and the chips fall into a simple two column grid with the hub centered, which keeps the diagram honest on phones instead of squeezing the curves.
Reach for this block when the pitch is connectivity: integration platforms, automation tools, or any product whose value is sitting in the middle of an existing stack. It says ecosystem faster than centered-with-feature-pills says features, and it suits a connectivity story better than with-kanban-preview or centered-with-browser-mockup, which sell a destination app instead of a hub.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a marketing stack hub joining email, CRM, chat, calendar, analytics, and a warehouse. Other arrangements:
Tip: six chips is the sweet spot, four feels thin and eight starts to tangle the connector curves on medium screens.