With Integration Grid
CTA copy beside a three by three grid of integration tiles with a filled Acme tile at the center.
CTA copy beside a three by three grid of integration tiles with a filled Acme tile at the center.
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
With Integration Grid is a split CTA inside one bordered panel. The left half carries a headline, a supporting line with the integration count, and two buttons. The right half is a three by three grid of square tiles, eight bordered neighbors with lucide icons around a filled Acme tile in the center, a small visual argument that the product belongs in the middle of the stack.
The nine tiles are one array of label and icon, with a center flag on the Acme tile, so recategorizing the neighbors is a string and import change. The grid caps its width so tiles stay square and calm beside the copy, and everything is tokens and icons, no images. The decorative grid is hidden from screen readers, the copy carries the message.
Reach for this block when the close is about fitting in rather than ripping out. It answers the will it work with our tools hesitation at exactly the moment of decision, where with-app-badges answers a platform question and split-with-mockup answers a what does it look like one. Pair it with a hero like centered-with-integration-diagram only on long pages, on short ones choose one of the two motifs.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a marketing stack with the usual suspects around the center tile. Other arrangements:
Tip: pick the eight neighbors your buyers actually run, recognition is what makes the center tile feel inevitable.