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.
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
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.