Blocks / Integrations
Integrations beta
The grid of tools a product plays well with — a mark, a name, and what it is for.
Works with the tools you already use
Browse allGitHubCode hosting
SlackMessaging
ClaudeAI assistant
GeminiAI models
YouTubeVideo
SpotifyAudio
XSocial
LinkedInSocial
TwitchStreaming
InstagramSocial
TikTokVideo
FacebookSocial
Built from: Button — include their CSS alongside this block.
<section class="k-int" style="max-width:640px"> <div class="k-int-h"><h3>Works with the tools you already use</h3><a class="btn btn-sec btn-sm" href="#">Browse all</a></div> <div class="k-int-grid"><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg></span><span><span class="k-int-name">GitHub</span><span class="k-int-cat" style="display:block">Code hosting</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M9.5 8v8M14.5 8v8M8 9.5h8M8 14.5h8"/></svg></span><span><span class="k-int-name">Slack</span><span class="k-int-cat" style="display:block">Messaging</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.4 12.0L21.6 12.0M14.1 13.2L18.1 15.5M13.2 14.1L16.8 20.3M12.0 14.4L12.0 19.0M10.8 14.1L7.2 20.3M9.9 13.2L5.9 15.5M9.6 12.0L2.4 12.0M9.9 10.8L5.9 8.5M10.8 9.9L7.2 3.7M12.0 9.6L12.0 5.0M13.2 9.9L16.8 3.7M14.1 10.8L18.1 8.5"/></svg></span><span><span class="k-int-name">Claude</span><span class="k-int-cat" style="display:block">AI assistant</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c.7 5.9 4.1 9.3 10 10-5.9.7-9.3 4.1-10 10-.7-5.9-4.1-9.3-10-10C7.9 11.3 11.3 7.9 12 2z"/></svg></span><span><span class="k-int-name">Gemini</span><span class="k-int-cat" style="display:block">AI models</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg></span><span><span class="k-int-name">YouTube</span><span class="k-int-cat" style="display:block">Video</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 10.2c2.7-.8 5.5-.6 8 .7M8.2 13c2.2-.6 4.5-.4 6.5.6M8.4 15.7c1.8-.5 3.6-.3 5.2.5"/></svg></span><span><span class="k-int-name">Spotify</span><span class="k-int-cat" style="display:block">Audio</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg></span><span><span class="k-int-name">X</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3.2 7.3H4.6V18h2.6v-7.7zM5.9 9.2a1.5 1.5 0 1 0 0-3.1 1.5 1.5 0 0 0 0 3.1zM18 18h-2.6v-3.7c0-1.2-.4-2-1.5-2-1.3 0-1.9.9-1.9 2V18H9.4v-7.7h2.6v1.1c.4-.7 1.3-1.3 2.6-1.3 2 0 3.4 1.3 3.4 3.9v4z"/></svg></span><span><span class="k-int-name">LinkedIn</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2H3v16h5v4l4-4h5l4-4V2z"/><path d="M11 7v4M16 7v4"/></svg></span><span><span class="k-int-name">Twitch</span><span class="k-int-cat" style="display:block">Streaming</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="0.4" fill="currentColor" stroke="none"/></svg></span><span><span class="k-int-name">Instagram</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.6 3c.4 2.2 1.9 3.8 4.1 4.1v3c-1.6 0-3-.5-4.1-1.3v6.4c0 3.4-2.4 5.8-5.7 5.8A5.5 5.5 0 0 1 5.3 15c0-3.2 2.7-5.6 6-5.3v3.1c-1.4-.3-2.8.7-2.8 2.1 0 1.3 1 2.3 2.3 2.3 1.5 0 2.6-1.1 2.6-2.7V3h3.2z"/></svg></span><span><span class="k-int-name">TikTok</span><span class="k-int-cat" style="display:block">Video</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.6 21v-6.9h2.3l.4-2.9h-2.7V9.3c0-.8.3-1.4 1.5-1.4h1.3V5.3c-.6-.1-1.3-.2-2.1-.2-2.1 0-3.6 1.3-3.6 3.7v2.4H8.4v2.9h2.3V21h2.9z"/></svg></span><span><span class="k-int-name">Facebook</span><span class="k-int-cat" style="display:block">Social</span></span></div></div> </section>
.k-int{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-int-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.k-int-h h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.k-int-h a{font-size:13px;font-weight:550;color:var(--k-accent);text-decoration:none;white-space:nowrap}
.k-int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.k-int-grid{grid-template-columns:repeat(2,1fr)}}
.k-int-tile{border:1px solid var(--k-line);border-radius:13px;background:var(--k-bg);padding:15px;display:grid;gap:10px;transition:border-color .14s}
.k-int-tile:hover{border-color:var(--k-border-strong)}
.k-int-ic{width:38px;height:38px;border-radius:10px;background:var(--k-bg-soft);border:1px solid var(--k-line);display:grid;place-items:center;color:var(--k-ink)}
.k-int-name{font-size:13px;font-weight:600}
.k-int-cat{font-size:11.5px;color:var(--k-ink-3);margin-top:1px}
Usage
For the "works with" section of a landing page. Marks are nominative: they name the tool, they do not decorate. Keep the grid to names a visitor already knows.