Central-hub integration diagram
Visual metaphor for 'we connect to everything', a hub node with dashed lines out to satellite app icons. Good directly above or below a logo cloud of actual integration partners. Keep it to 4 satellites max, more than that reads cluttered at small sizes.
Live preview
open in new tab ↗<section class="cb-hub">
<span class="cb-eyebrow">App sync</span>
<h2>All your key tools in sync</h2>
<div class="cb-hub-diagram">
<svg viewBox="0 0 320 200" width="320" height="200">
<line x1="160" y1="100" x2="60" y2="30" stroke="#D8D8D4" stroke-dasharray="4 4"/>
<line x1="160" y1="100" x2="260" y2="30" stroke="#D8D8D4" stroke-dasharray="4 4"/>
<line x1="160" y1="100" x2="60" y2="170" stroke="#D8D8D4" stroke-dasharray="4 4"/>
<line x1="160" y1="100" x2="260" y2="170" stroke="#D8D8D4" stroke-dasharray="4 4"/>
<circle cx="160" cy="100" r="26" fill="#111"/>
<text x="160" y="104" font-size="10" fill="#fff" text-anchor="middle" font-family="monospace">HUB</text>
<circle cx="60" cy="30" r="18" fill="#fff" stroke="#E4E4E0"/>
<circle cx="260" cy="30" r="18" fill="#fff" stroke="#E4E4E0"/>
<circle cx="60" cy="170" r="18" fill="#fff" stroke="#E4E4E0"/>
<circle cx="260" cy="170" r="18" fill="#fff" stroke="#E4E4E0"/>
</svg>
<div class="cb-hub-labels">
<span>Calendar</span><span>Chat</span><span>CRM</span><span>Payments</span>
</div>
</div>
</section>Block id: cal-com-integration-hub-diagramvanilla · code-required
More composite blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.