webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Integration Cards — Connect Apps Grid HTML CSS JS

Integration Cards · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Grid

Copy & paste

Source Code

<div class="icg-wrap">
  <div class="icg-top">
    <div>
      <h2>Integrations</h2>
      <p>Connect the tools your team already uses.</p>
    </div>
    <div class="icg-filter" id="icgFilter">
      <button type="button" class="icg-chip active" data-f="all">All</button>
      <button type="button" class="icg-chip" data-f="connected">Connected</button>
    </div>
  </div>

  <div class="icg-grid" id="icgGrid"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Whole-card connected state
Connected cards get a green border/tint, checkmark, status, and a red Disconnect button — scannable at a glance.
One-button connect/disconnect
The action button flips the integration on or off with matching label and styling, re-rendering from state.
Distinct disconnect styling
Disconnect is a deliberate red action, signaling it stops syncing rather than being a quiet toggle.
All / connected filter
Two views — every integration or only connected ones — with an empty state when none are connected.
Brand logos and categories
Each card shows the app on its brand color with a category label for scanning a directory.
Description per integration
A short line explains what connecting each app actually does, fixed-height for a uniform grid.
Data-driven catalog
Everything comes from an INTEGRATIONS array — add or edit apps with a single entry.
Responsive auto-fill grid
Cards reflow from multiple columns to one on narrow screens for any device.

About this UI Snippet

Integration Cards — App Connection Grid with Connect/Disconnect State

Screenshot of the Integration Cards snippet rendered live

The integrations or "connected apps" page — a grid of cards for Slack, GitHub, Stripe, and the rest, each with a Connect or Disconnect button — is a standard part of every SaaS product's settings. This snippet builds that grid in plain HTML, CSS, and vanilla JavaScript: branded app logos, a clear connected state, category labels, a filter between all and connected apps, and a toggle that flips each card between connect and disconnect.

A card that reflects its connection state

Each integration card shows the app's logo (on its brand color), name, category, and a short description of what connecting does. The card's entire appearance responds to whether it's connected: a connected card gets a green-tinted border and background, a checkmark next to its name, a green "● Connected" status, and its action button becomes a red "Disconnect" — while a disconnected card is neutral with a "Connect" button. This whole-card state change makes it instantly scannable which apps are active, far clearer than a small toggle alone, and it follows the convention users know from GitHub, Slack, and Zapier's app directories.

Connect and disconnect from one toggle

The action button flips the integration's on flag and re-renders, so the same button connects a disconnected app and disconnects a connected one, with its label and styling updating to match. In a real app this is where you'd start the provider's OAuth connect flow (for connecting) or call your disconnect endpoint (for disconnecting) — the demo toggles state locally so the full interaction is visible. Making disconnect a distinct red action (not a quiet toggle) is deliberate: disconnecting often stops data syncing, so it should look like a considered action.

Filtering all vs. connected

A filter switches between showing every available integration and only the connected ones — the two views users actually want ("what can I connect?" and "what's already connected?"). The filter re-renders from the same data, and when "Connected" is selected with nothing connected, an empty state explains why the grid is blank rather than leaving it confusingly empty. This is the standard two-tab pattern for an integrations directory.

Data-driven and category-organized

Every card comes from an INTEGRATIONS array (id, name, category, description, icon, brand color, connected flag), so the catalog is a data edit — add an app, change a description, or mark one connected by editing one entry. Each card's category label ("Communication," "Development," "Payments") helps users scan a long directory; in a larger catalog you'd extend the filter to category tabs, which the same render supports.

Responsive grid, drop-in ready

The cards sit in an auto-fill grid that reflows from two or three columns down to one on narrow screens, so the directory works on any device. Because it's entirely data-driven and self-contained, you populate INTEGRATIONS from your backend (which apps exist and which the current account has connected), wire the buttons to your OAuth and disconnect flows, and the grid renders the rest. The same component works for any "connect external services" surface, not just a settings page.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSAn integrations grid renders with apps like Slack, GitHub, and Stripe; connected ones are green-tinted.
  2. 2
    Connect an appClick "Connect" on a neutral card — it turns green with a checkmark, a "Connected" status, and a red Disconnect button.
  3. 3
    Disconnect an appClick "Disconnect" on a connected card — it returns to the neutral, not-connected state.
  4. 4
    Filter the viewSwitch to "Connected" to see only active integrations; an empty state shows if none are connected.
  5. 5
    Edit the catalogAdd or change entries in the INTEGRATIONS array (name, category, description, icon, color, on).
  6. 6
    Wire up real flowsIn the toggle handler, start the provider's OAuth connect flow or call your disconnect endpoint.

Real-world uses

Common Use Cases

SaaS settings pages
Provide the standard connected apps page, with connected cards given a green border, tint, checkmark and status label.
App marketplaces and directories
Browse available integrations with an All or Connected filter, and a deliberate red Disconnect action that signals stopping data flow.
Onboarding connect steps
Prompt new users to connect their tools, following an onboarding checklist widget towards completion of setup.
Workspace and team settings
Manage which external services are linked, alongside notification preferences for how each integration may alert people.
Automation tools and state-driven cards
Show connectable services in a workflow tool, comparing with a radio card group and studying whole-card state styling.
Related: Team Member Card Grid
See the Team Member Card Grid for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

In the toggle handler, branch on the current state: to connect, start the provider's OAuth flow (redirect to your /connect/slack route or open their OAuth popup), and mark the integration connected on a successful callback; to disconnect, call your backend's disconnect/revoke endpoint and mark it disconnected on success. Show a loading state on the button during the request, and only flip the card's appearance once the operation actually succeeds.

Fetch the account's connected integrations from your backend on load and set each INTEGRATIONS entry's on flag accordingly (match by id). The catalog of available apps can be static or also come from your API; the connected state should always come from the server so it reflects reality across devices and sessions, not just local toggles.

Disconnecting an integration usually stops data syncing or removes access, which can have real consequences (lost automation, broken workflows). Styling it as a deliberate red action — rather than a quiet toggle that looks the same as connecting — signals weight and reduces accidental disconnects. For high-impact integrations, add a confirmation dialog before disconnecting.

Extend the filter from all/connected to category tabs (Communication, Development, Payments…) driven by the cat field, add a search box that filters the INTEGRATIONS array by name, and paginate or lazy-render if the catalog is large. The render is already data-driven, so these are additions to the filtering step, not changes to the card itself.

In React, hold the integrations (with connected flags) and filter in useState, derive the visible list, and call your connect/disconnect API in the toggle handler; in Vue, use a reactive array with a computed filtered list; in Angular, use a component array and a getter. The card rendering and state logic port directly — only the async connect/disconnect calls move into the framework's effects.