Browse Blocks

Logo Clouds

Showcase customers and partners.

Basic

A compact row of logos wraps neatly on smaller screens.

View Code

<section class="marketing-block marketing-logos-strip" aria-label="Supported tools">
  <ul class="marketing-wordmarks" aria-label="Frameworks">
    <li>
      <span class="icon" data-icon="brand-html" aria-hidden="true">
      </span>
      <span>
        HTML
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-react" aria-hidden="true">
      </span>
      <span>
        React
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nextjs" aria-hidden="true">
      </span>
      <span>
        Next.js
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-vue" aria-hidden="true">
      </span>
      <span>
        Vue
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nuxt" aria-hidden="true">
      </span>
      <span>
        Nuxt
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-angular" aria-hidden="true">
      </span>
      <span>
        Angular
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-svelte" aria-hidden="true">
      </span>
      <span>
        Svelte
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-astro" aria-hidden="true">
      </span>
      <span>
        Astro
      </span>
    </li>
  </ul>
</section>

With heading

A centered collection of neutral logos and readable names.

View Code

<section
  class="marketing-block marketing-logos stack gap-lg"
  aria-labelledby="product-tools-title"
>
  <header class="marketing-heading stack gap-md">
    <p class="eyebrow">
      Fits your workflow
    </p>
    <h2 id="product-tools-title">
      Your stack. One design language.
    </h2>
    <p class="muted">
      Start with native HTML or bring Layout UI to the framework you already use.
    </p>
  </header>
  <ul class="marketing-wordmarks" aria-label="Frameworks">
    <li>
      <span class="icon" data-icon="brand-html" aria-hidden="true">
      </span>
      <span>
        HTML
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-react" aria-hidden="true">
      </span>
      <span>
        React
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nextjs" aria-hidden="true">
      </span>
      <span>
        Next.js
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-vue" aria-hidden="true">
      </span>
      <span>
        Vue
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nuxt" aria-hidden="true">
      </span>
      <span>
        Nuxt
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-angular" aria-hidden="true">
      </span>
      <span>
        Angular
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-svelte" aria-hidden="true">
      </span>
      <span>
        Svelte
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-astro" aria-hidden="true">
      </span>
      <span>
        Astro
      </span>
    </li>
  </ul>
</section>

Logos on the left

A balanced split layout stacks on smaller screens.

View Code

<section
  class="marketing-block marketing-logos-split marketing-logos-left"
  aria-labelledby="logos-left-title"
>
  <header class="marketing-heading stack gap-md">
    <p class="eyebrow">
      Fits your workflow
    </p>
    <h2 id="logos-left-title">
      Your tools. A shared foundation.
    </h2>
    <p class="muted">
      Build with the tools you know, with a consistent design across every experience.
    </p>
    <a href="/docs/integrations">
      Explore Integrations
    </a>
  </header>
  <ul class="marketing-wordmarks" aria-label="Frameworks">
    <li>
      <span class="icon" data-icon="brand-html" aria-hidden="true">
      </span>
      <span>
        HTML
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-react" aria-hidden="true">
      </span>
      <span>
        React
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nextjs" aria-hidden="true">
      </span>
      <span>
        Next.js
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-vue" aria-hidden="true">
      </span>
      <span>
        Vue
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nuxt" aria-hidden="true">
      </span>
      <span>
        Nuxt
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-angular" aria-hidden="true">
      </span>
      <span>
        Angular
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-svelte" aria-hidden="true">
      </span>
      <span>
        Svelte
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-astro" aria-hidden="true">
      </span>
      <span>
        Astro
      </span>
    </li>
  </ul>
</section>

Logos on the right

A balanced split layout stacks on smaller screens.

View Code

<section
  class="marketing-block marketing-logos-split marketing-logos-right"
  aria-labelledby="logos-right-title"
>
  <header class="marketing-heading stack gap-md">
    <p class="eyebrow">
      Fits your workflow
    </p>
    <h2 id="logos-right-title">
      Your tools. A shared foundation.
    </h2>
    <p class="muted">
      Build with the tools you know, with a consistent design across every experience.
    </p>
    <a href="/docs/integrations">
      Explore Integrations
    </a>
  </header>
  <ul class="marketing-wordmarks" aria-label="Frameworks">
    <li>
      <span class="icon" data-icon="brand-html" aria-hidden="true">
      </span>
      <span>
        HTML
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-react" aria-hidden="true">
      </span>
      <span>
        React
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nextjs" aria-hidden="true">
      </span>
      <span>
        Next.js
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-vue" aria-hidden="true">
      </span>
      <span>
        Vue
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-nuxt" aria-hidden="true">
      </span>
      <span>
        Nuxt
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-angular" aria-hidden="true">
      </span>
      <span>
        Angular
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-svelte" aria-hidden="true">
      </span>
      <span>
        Svelte
      </span>
    </li>
    <li>
      <span class="icon" data-icon="brand-astro" aria-hidden="true">
      </span>
      <span>
        Astro
      </span>
    </li>
  </ul>
</section>

Scrolling strip

A continuous strip with pause controls. Reduced motion shows every logo in a static layout.

View Code

<section
  class="marketing-block marketing-logo-scroll stack gap-lg"
  data-logo-scroll
  aria-labelledby="scroll-logos-title"
>
  <header class="cluster justify-between items-center gap-md">
    <h2 id="scroll-logos-title">
      Works with your tools.
    </h2>
    <button class="btn secondary btn-small" type="button" data-logo-playback hidden>
      Pause Demo
    </button>
  </header>
  <div class="marketing-logo-window">
    <div class="marketing-logo-track">
      <ul class="marketing-wordmarks" aria-label="Frameworks">
        <li>
          <span class="icon" data-icon="brand-html" aria-hidden="true">
          </span>
          <span>
            HTML
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-react" aria-hidden="true">
          </span>
          <span>
            React
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-nextjs" aria-hidden="true">
          </span>
          <span>
            Next.js
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-vue" aria-hidden="true">
          </span>
          <span>
            Vue
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-nuxt" aria-hidden="true">
          </span>
          <span>
            Nuxt
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-angular" aria-hidden="true">
          </span>
          <span>
            Angular
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-svelte" aria-hidden="true">
          </span>
          <span>
            Svelte
          </span>
        </li>
        <li>
          <span class="icon" data-icon="brand-astro" aria-hidden="true">
          </span>
          <span>
            Astro
          </span>
        </li>
      </ul>
    </div>
  </div>
</section>