Customer Logo Quote Strip

A copy-paste quotes & testimonials component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Quotes & TestimonialsHTMLCSSany framework

“We replaced four tools with one. Engineers actually likeusing it.”

Priya Shah · VP Engineering

Copy into your project

HTML

<article class="nuda-logo-quote">
  <div class="nuda-logo-quote__logo" aria-hidden="true">
    <svg viewBox="0 0 80 24">
      <circle cx="12" cy="12" r="8" fill="#e4ff54" />
      <text x="28" y="17" font-size="14" font-weight="700" fill="#fafafa">ORBIT</text>
    </svg>
  </div>
  <p class="nuda-logo-quote__body">
    &ldquo;We replaced four tools with one. Engineers actually <em>like</em> using it.&rdquo;
  </p>
  <div class="nuda-logo-quote__cite">Priya Shah &middot; VP Engineering</div>
</article>

CSS

/* Customer Logo Quote Strip
   Brand-anchored quote with logo on top. */

.nuda-logo-quote {
  max-width: 420px;
  padding: 1.5rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-logo-quote__logo {
  height: 24px;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.nuda-logo-quote__logo svg {
  height: 24px;
  width: auto;
}

.nuda-logo-quote__body {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #fafafa;
}

.nuda-logo-quote__body em {
  color: #e4ff54;
  font-style: normal;
  font-weight: 600;
}

.nuda-logo-quote__cite {
  font-size: 0.8125rem;
  color: #a0a0a8;
}

How to use Customer Logo Quote Strip

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More quotes & testimonials components

← Browse all NudaUI components