Logo Bar Components

Show integrations, partners, or client brands. Use modes for muted social proof, hover-reveal color (linked logos), or UI-only auto-flash reveals.

Variant: default — Mode 1 (Muted)

Clean, muted social proof. Best for "Trusted by" sections and non-clickable logo strips.

Trusted by teams building fast

{
  "component": "logo-bar",
  "variant": "default",
  "data": {
    "heading": "Trusted by teams building fast",
    "mode": 1,
    "logos": [
      { "name": "Cloudflare", "icon": "fa-cloudflare" },
      { "name": "AWS", "icon": "fa-aws" },
      { "name": "GitHub", "icon": "fa-github" },
      { "name": "Docker", "icon": "fa-docker" },
      { "name": "Node.js", "icon": "fa-node-js" }
    ],
    "bg": "white"
  }
}

<section class="logo-bar logo-bar-default logo-bar--mode-1 bg-white py-5">
  <!-- centered logo row -->
</section>

Variant: default — Mode 2 (Hover Color + Links)

Each logo can link out. On hover, reveal an optional per-logo color (hex or semantic token/class).

Works with your favorite tools

GitHub AWS React Docker Node.js

{
  "component": "logo-bar",
  "variant": "default",
  "data": {
    "heading": "Works with your favorite tools",
    "mode": 2,
    "showNames": true,
    "logos": [
      { "name": "GitHub", "icon": "fa-github", "url": "https://github.com", "hoverColor": "#111111" },
      { "name": "AWS", "icon": "fa-aws", "url": "https://aws.amazon.com", "hoverColor": "#FF9900" },
      { "name": "React", "icon": "fa-react", "url": "https://react.dev", "hoverClass": "info" },
      { "name": "Docker", "icon": "fa-docker", "url": "https://www.docker.com", "hoverClass": "primary" },
      { "name": "Node.js", "icon": "fa-node-js", "url": "https://nodejs.org", "hoverClass": "success" }
    ],
    "bg": "white"
  }
}

<section class="logo-bar logo-bar-default logo-bar--mode-2 bg-white py-5">
  <!-- logo items are <a> when url exists; hover reveals per-logo color -->
</section>

Variant: scrolling — Mode 1 (Muted)

Infinite scroll animation. Great for large integration lists. Pauses on hover.

Integrations

{
  "component": "logo-bar",
  "variant": "scrolling",
  "data": {
    "heading": "Integrations",
    "mode": 1,
    "logos": [
      { "name": "Stripe", "icon": "fa-stripe" },
      { "name": "PayPal", "icon": "fa-paypal" },
      { "name": "Apple Pay", "icon": "fa-apple-pay" },
      { "name": "Google Pay", "icon": "fa-google-pay" },
      { "name": "Shopify", "icon": "fa-shopify" },
      { "name": "WordPress", "icon": "fa-wordpress" },
      { "name": "Slack", "icon": "fa-slack" },
      { "name": "Discord", "icon": "fa-discord" }
    ],
    "bg": "white"
  }
}

<section class="logo-bar logo-bar-scrolling logo-bar--mode-1 bg-white py-5">
  <!-- duplicated logo track for seamless scrolling -->
</section>

Variant: grid — Mode 3 (Auto Flash Reveal)

UI-only mode: logos occasionally reveal their brand color with staggered timing. Best when logos are not links.

Our Technology Stack

A subtle animation keeps the section alive without feeling clickable

JavaScript

TypeScript

React

Node.js

Docker

Git

{
  "component": "logo-bar",
  "variant": "grid",
  "data": {
    "heading": "Our Technology Stack",
    "subheading": "A subtle animation keeps the section alive without feeling clickable",
    "mode": 3,
    "showNames": true,
    "logos": [
      { "name": "JavaScript", "icon": "fa-js", "hoverColor": "#F7DF1E" },
      { "name": "TypeScript", "icon": "fa-t", "hoverColor": "#3178C6" },
      { "name": "React", "icon": "fa-react", "hoverClass": "info" },
      { "name": "Node.js", "icon": "fa-node-js", "hoverClass": "success" },
      { "name": "Docker", "icon": "fa-docker", "hoverClass": "primary" },
      { "name": "Git", "icon": "fa-git-alt", "hoverColor": "#F05032" }
    ],
    "bg": "light"
  }
}

<section class="logo-bar logo-bar-grid logo-bar--mode-3 bg-light py-5">
  <!-- grid items auto-flash reveal color with staggered delays -->
</section>

Explore More Components

View All Components