Directory Grid
An integration directory with a centered header, static category chips, a three by two grid of tool cards with Connect links, and a request line.
An integration directory with a centered header, static category chips, a three by two grid of tool cards with Connect links, and a request line.
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
Directory Grid gives your integrations a browsable storefront. A centered header sets up the pitch, a row of category chips shows how the catalog is organized with the first chip styled active, and a three by two grid of cards presents each tool with its mark, name, a one line summary of what the connection does, and a quiet Connect link. A muted request line under the grid catches the tools you have not built yet.
Every card is one entry in a typed array, and each tool mark is a small inline SVG drawn from currentColor, so there are no image files to manage and the grid adapts to light and dark on its own. The chips are static styling out of the box, and each integration already carries a category field, so wiring the chips to real filtering is a small state change rather than a rebuild.
Reach for this block when the breadth of your catalog is a selling point in its own right. On a customer support platform landing page it works as the proof behind a claim like works with your whole stack, laying out the chat, analytics, and developer tools a busy support team already runs. It also holds up as the centerpiece of a dedicated integrations page where visitors arrive ready to scan for one specific tool.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is your integration catalog. A few other ways to use the frame:
Tip: keep every summary to one sentence of similar length so the six cards read as an even grid, and lead with a verb so scanners catch what each integration actually does.