Logo Cloud — `<mv-logo-cloud>`

Customer logo section in an editorial register: a ruled table of logos with mono captions next to a headline figure, a marquee band beside a stat, or columns that swap logos one after another (pausable, reduced-motion aware).

Category	Blocks
Type	Block (ready-made section) (`<mv-logo-cloud>`)
Status	stable
Also installs	marquee
Keywords	logos, clients, social proof, trusted by, marquee, rotating logos, landing, customers

When to use

A landing page must show customer logos in an editorial ruled table with captions and a headline figure
Logos should scroll in a marquee band beside a key stat
More logos exist than space allows, so columns should swap logos in turn

Avoid when

The social proof is quotes from customers rather than their logos → use Testimonials instead

Install

node scripts/add.mjs logo-cloud --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["logo-cloud"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/element.js, core/motion.js, core/observe.js, components/logo-cloud/logo-cloud.css, components/logo-cloud/logo-cloud.js, core/dom.js, components/marquee/marquee.js, components/marquee/marquee.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div id="logo-cloud-demo" style="background:var(--mv-bg)">
  <!-- ═════════ Grid: ruled table with captions ═════════ -->
  <section class="mv-logo-cloud" data-variant="grid" aria-labelledby="lc-grid-title">
    <div class="mv-logo-cloud-inner">
      <header class="mv-logo-cloud-header">
        <p class="mv-logo-cloud-eyebrow">Customers</p>
        <h2 class="mv-logo-cloud-stat" id="lc-grid-title">3,900 teams</h2>
        <p class="mv-logo-cloud-title">keep their docs in <strong>Quillwork</strong>, from two-person startups to public companies.</p>
      </header>
      <ul class="mv-logo-cloud-list">
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 92 32" role="img" aria-label="Lumen" fill="currentColor"><circle cx="13" cy="16" r="6"/><path d="M13 3v4M13 25v4M0 16h4M22 16h4M4 7l3 3M19 22l3 3M4 25l3-3M19 10l3-3" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" fill="none"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Lumen</text></svg><span class="mv-logo-cloud-meta">Fintech · 640 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Nordik" fill="currentColor"><path d="M1 26 10 8l5 9 3-5 8 14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Nordik</text></svg><span class="mv-logo-cloud-meta">Mobility · 210 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Arcadia" fill="currentColor"><path d="M3 26a10 10 0 0 1 20 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><circle cx="13" cy="10" r="3"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Arcadia</text></svg><span class="mv-logo-cloud-meta">Gaming · 1,200 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Polaris" fill="currentColor"><path d="M13 2c1 8 3 11 11 14-8 3-10 6-11 14-1-8-3-11-11-14 8-3 10-6 11-14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Polaris</text></svg><span class="mv-logo-cloud-meta">Space data · 95 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Vertex" fill="currentColor"><path d="M13 3 24 9.5v13L13 29 2 22.5v-13z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Vertex</text></svg><span class="mv-logo-cloud-meta">Infra · 380 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Octave" fill="currentColor"><circle cx="9" cy="16" r="7" fill="none" stroke="currentColor" stroke-width="3"/><circle cx="18" cy="16" r="7"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Octave</text></svg><span class="mv-logo-cloud-meta">Audio · 150 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Kairos" fill="currentColor"><path d="M4 4h18L13 16l9 12H4l9-12z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><path d="M8 26h10l-5-6z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Kairos</text></svg><span class="mv-logo-cloud-meta">Health · 520 seats</span></li>
        <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Tidal" fill="currentColor"><path d="M1 12c4-4 8-4 12 0s8 4 12 0M1 20c4-4 8-4 12 0s8 4 12 0" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Tidal</text></svg><span class="mv-logo-cloud-meta">Energy · 300 seats</span></li>
      </ul>
    </div>
  </section>

  <!-- ═════════ Marquee: stat + band ═════════ -->
  <section class="mv-logo-cloud" data-variant="marquee" aria-labelledby="lc-mq-title" style="border-top:1px solid var(--mv-border)">
    <div class="mv-logo-cloud-inner">
      <header class="mv-logo-cloud-header">
        <p class="mv-logo-cloud-eyebrow" id="lc-mq-title">In production at</p>
        <p class="mv-logo-cloud-title"><strong>41 countries</strong>, 1.2 million pages published last month.</p>
      </header>
      <mv-marquee speed="30" fade pause-on-hover aria-label="Quillwork customers">
        <svg class="mv-logo-cloud-logo" viewBox="0 0 92 32" role="img" aria-label="Lumen" fill="currentColor"><circle cx="13" cy="16" r="6"/><path d="M13 3v4M13 25v4M0 16h4M22 16h4M4 7l3 3M19 22l3 3M4 25l3-3M19 10l3-3" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" fill="none"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Lumen</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 92 32" role="img" aria-label="Helix" fill="currentColor"><path d="M5 3c0 9 16 9 16 13S5 20 5 29M21 3c0 9-16 9-16 13s16 4 16 13" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Helix</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Nordik" fill="currentColor"><path d="M1 26 10 8l5 9 3-5 8 14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Nordik</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 118 32" role="img" aria-label="Mosaic" fill="currentColor"><rect x="2" y="3" width="10" height="10" rx="2.5"/><rect x="14" y="3" width="10" height="10" rx="5" opacity=".55"/><rect x="2" y="15" width="10" height="10" rx="5" opacity=".55"/><rect x="14" y="15" width="10" height="10" rx="2.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mosaic</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Arcadia" fill="currentColor"><path d="M3 26a10 10 0 0 1 20 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><circle cx="13" cy="10" r="3"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Arcadia</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 100 32" role="img" aria-label="Mist" fill="currentColor"><path d="M3 20a6 6 0 0 1 5.5-8.3A8 8 0 0 1 24 13a5 5 0 0 1-1 10H8" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mist</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Polaris" fill="currentColor"><path d="M13 2c1 8 3 11 11 14-8 3-10 6-11 14-1-8-3-11-11-14 8-3 10-6 11-14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Polaris</text></svg><svg class="mv-logo-cloud-logo" viewBox="0 0 108 32" role="img" aria-label="Quanta" fill="currentColor"><circle cx="13" cy="16" r="10" fill="none" stroke="currentColor" stroke-width="3"/><path d="m17 20 6 6" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Quanta</text></svg>
      </mv-marquee>
    </div>
  </section>

  <!-- ═════════ Rotate: columns that swap logos ═════════ -->
  <mv-logo-cloud interval="2600">
    <section class="mv-logo-cloud" data-variant="rotate" aria-labelledby="lc-rot-title" style="border-top:1px solid var(--mv-border)">
      <div class="mv-logo-cloud-inner">
        <header class="mv-logo-cloud-header">
          <p class="mv-logo-cloud-eyebrow">Trusted by</p>
          <h2 class="mv-logo-cloud-title" id="lc-rot-title">Docs teams at <strong>12 of the companies</strong> you shipped with this week</h2>
        </header>
        <ul class="mv-logo-cloud-list">
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 92 32" role="img" aria-label="Lumen" fill="currentColor"><circle cx="13" cy="16" r="6"/><path d="M13 3v4M13 25v4M0 16h4M22 16h4M4 7l3 3M19 22l3 3M4 25l3-3M19 10l3-3" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" fill="none"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Lumen</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 92 32" role="img" aria-label="Helix" fill="currentColor"><path d="M5 3c0 9 16 9 16 13S5 20 5 29M21 3c0 9-16 9-16 13s16 4 16 13" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Helix</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Nordik" fill="currentColor"><path d="M1 26 10 8l5 9 3-5 8 14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Nordik</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 118 32" role="img" aria-label="Mosaic" fill="currentColor"><rect x="2" y="3" width="10" height="10" rx="2.5"/><rect x="14" y="3" width="10" height="10" rx="5" opacity=".55"/><rect x="2" y="15" width="10" height="10" rx="5" opacity=".55"/><rect x="14" y="15" width="10" height="10" rx="2.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mosaic</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Arcadia" fill="currentColor"><path d="M3 26a10 10 0 0 1 20 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><circle cx="13" cy="10" r="3"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Arcadia</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 100 32" role="img" aria-label="Mist" fill="currentColor"><path d="M3 20a6 6 0 0 1 5.5-8.3A8 8 0 0 1 24 13a5 5 0 0 1-1 10H8" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mist</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Polaris" fill="currentColor"><path d="M13 2c1 8 3 11 11 14-8 3-10 6-11 14-1-8-3-11-11-14 8-3 10-6 11-14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Polaris</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 108 32" role="img" aria-label="Quanta" fill="currentColor"><circle cx="13" cy="16" r="10" fill="none" stroke="currentColor" stroke-width="3"/><path d="m17 20 6 6" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Quanta</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Vertex" fill="currentColor"><path d="M13 3 24 9.5v13L13 29 2 22.5v-13z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Vertex</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Octave" fill="currentColor"><circle cx="9" cy="16" r="7" fill="none" stroke="currentColor" stroke-width="3"/><circle cx="18" cy="16" r="7"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Octave</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 103 32" role="img" aria-label="Kairos" fill="currentColor"><path d="M4 4h18L13 16l9 12H4l9-12z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><path d="M8 26h10l-5-6z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Kairos</text></svg></li>
          <li class="mv-logo-cloud-item"><svg class="mv-logo-cloud-logo" viewBox="0 0 114 32" role="img" aria-label="Tidal" fill="currentColor"><path d="M1 12c4-4 8-4 12 0s8 4 12 0M1 20c4-4 8-4 12 0s8 4 12 0" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Tidal</text></svg></li>
        </ul>
      </div>
    </section>
  </mv-logo-cloud>
</div>

API

Attributes

Name	Type	Default	Description
`data-variant`	grid \| marquee \| rotate	`(centered row)`	On .mv-logo-cloud. grid: ruled table (2 → --mv-logo-cloud-columns from 40rem), header split in two from 56rem; marquee: header column + `<mv-marquee>` from 56rem; rotate: wrap the section in `<mv-logo-cloud>` so its logos are dealt into columns that swap in turn.
`interval`	number	`2800`	On `<mv-logo-cloud>`: ms between two swaps (min 800).
`columns`	number	`4`	On `<mv-logo-cloud>`: number of rotating columns (2 below a 40rem section).

Content structure

Name	Description
`.mv-logo-cloud-inner`	Centered container: .mv-logo-cloud-header (-eyebrow, -stat, -title) then -list (or `<mv-marquee>`).
`.mv-logo-cloud-list > .mv-logo-cloud-item`	`<ul>`/`<li>`: logo (.mv-logo-cloud-logo) and optional .mv-logo-cloud-meta mono caption; may be wrapped in a link (not in the rotate variant).
`.mv-logo-cloud-logo`	On the `<svg>`/`<img>`: gray and muted, regains its color on hover.

CSS classes

Name	Description
`mv-logo-cloud`	Root section, mv-logo-cloud query container.
`mv-logo-cloud-stage / -cell / -face / -pause`	Generated by the rotate variant: aria-hidden columns and the pause/play button.

CSS variables

Name	Default	Description
`--mv-logo-cloud-columns`	`4`	Grid columns (≥ 40rem; 2 below).
`--mv-logo-cloud-logo-h`	`1.6rem`	Logo height.
`--mv-logo-cloud-max`	`72rem`	Max width.
`--mv-logo-cloud-bg`	`transparent`	Section background.

Accessibility

Each SVG logo has role="img" and an aria-label (or an alt for an <img>), in a semantic <ul>. Marquee: filler copies are inert and scrolling stops with reduced motion. Rotate: the original list stays available to assistive tech (visually hidden) while the animated copy is inert and aria-hidden; rotation pauses on hover, focus, off screen and in a hidden tab, a Pause/Play toggle (aria-pressed) stops it for good (WCAG 2.2.2), and it never runs under reduced motion.