Section

Integrations

Grid of integration cards with 'new' tags.

Section
Vanilla
HTML
MIT

Preview

Live section

Preview not available

No interactive preview for this section.

Install it with the CLI below, or read the implementation on this page.

No dependencies Responsive · Light/dark · Focus-visible

Install

Add to your project

terminal

npx devsnips add Vanilla/Sections/Products/product-integrations

registry path: Vanilla/Sections/Products/product-integrations

Source

Implementation

code.html

<!-- Snippet Name: Integrations | Family: Products | Description: Grid of integration cards with 'new' tags. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Integrations | DevSnips</title>
  <meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: product-integrations. Copy, customize, ship.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>  /* ---- Neo-Brutalist design tokens ---- */
  :root{
    --bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
    --border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
    --accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
    --radius:6px; --radius-lg:10px;
    --shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
    --ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
    --container:1200px; --gutter:20px;
    --fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
    --fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
    --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
      --border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
  }
  /* ---- base layout + components ---- */
  *{box-sizing:border-box}
  .nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
    line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
  .nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
  .nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
  .nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
  .nb p{margin:0} .nb a{color:inherit}
  .nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    border:2px solid var(--border);background:var(--surface);padding:6px 12px;
    border-radius:999px;box-shadow:var(--shadow)}
  .nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
  .nb .muted{color:var(--muted)}
  .nb .center{text-align:center;margin-inline:auto}
  .nb .grid{display:grid;gap:var(--gutter)}
  .nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
    text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
    padding:14px 22px;background:var(--primary);color:var(--primary-fg);
    box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
  .nb .btn.outline{background:var(--surface);color:var(--foreground)}
  .nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
  .nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
  .nb .btn.accent{background:var(--accent);color:#0a0a0a}
  .nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
  .nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
  .nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
    padding:4px 10px;border-radius:999px;background:var(--surface)}
  .nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
  .nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
    padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
  .nb .skip:focus{left:8px}
  .nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  @media (prefers-reduced-motion:reduce){
    .nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
      transition-duration:.001ms!important;animation-iteration-count:1!important}
  }

  .pi .head{text-align:center;margin-bottom:36px}.pi .head h2{margin:12px 0 8px}
  .pi .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pi .int{border:3px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:14px;transition:transform .14s,box-shadow .14s}
  .pi .int:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .pi .ic{width:48px;height:48px;flex:none;border:3px solid var(--border);border-radius:10px;display:grid;place-items:center;background:var(--bg)}
  .pi .int h3{font-size:1rem;margin-bottom:2px}.pi .int p{font-size:.82rem;color:var(--muted)}
  .pi .int .tag{margin-left:auto;font-size:.72rem;font-weight:800;padding:3px 8px;border:2px solid var(--border);border-radius:999px;background:var(--lime)}
  .pi .more{text-align:center;margin-top:30px}
  @media(min-width:760px){.pi .grid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1100px){.pi .grid{grid-template-columns:repeat(4,1fr)}}</style>
</head>
<body class="nb">
  <a class="skip" href="#main">Skip to content</a>

  <section class="pi" aria-labelledby="pi-title">
    <div class="container">
      <div class="head"><span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/></svg> Integrations</span><h2 id="pi-title">Plays well with your stack.</h2><p class="lead">120+ native integrations and a typed API for the rest.</p></div>
      <div class="grid">
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg></span><div><h3>Slack</h3><p>Notifications</p></div><span class="tag">new</span></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M16 18l6-6-6-6M8 6l-6 6 6 6'/></svg></span><div><h3>GitHub</h3><p>Code sync</p></div><span class="tag">new</span></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/></svg></span><div><h3>Zapier</h3><p>Automate</p></div></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg></span><div><h3>Gmail</h3><p>Inbox</p></div></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg></span><div><h3>Okta</h3><p>SSO</p></div></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3h7v7H3zM14 3h7v7H3zM3 14h7v7H3zM14 14h7v7H3z'/></svg></span><div><h3>Notion</h3><p>Docs</p></div></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M13 2L4 14h7v8l9-12h-7z'/></svg></span><div><h3>Stripe</h3><p>Billing</p></div></article>
        <article class="int"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-6 8-6s8 2 8 6'/></svg></span><div><h3>HubSpot</h3><p>CRM</p></div></article>
      </div>
      <div class="more"><a class="btn outline" href="#">Browse all integrations</a></div>
    </div>
  </section>
</body>
</html>

# Integrations

Grid of integration cards with 'new' tags.

**Technology:** Vanilla HTML/CSS/JS  
**Category:** sections / products  
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)  
**Responsive:** Mobile-first (320px → 1920px)  
**Dark mode:** via `prefers-color-scheme`  

**Tags:** product, integrations, grid  
**Features:** light/dark, responsive

## Usage

1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand.

105 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This section is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://sections/products/product-integrations

Continue browsing

View all

Live section

Add to your project

Implementation

Available to your agent.

Related sections