# Logo cloud / Logos de clientes > “Trusted by” strip, static or scrolling. Page: https://componentes-lovat.vercel.app/c/logos/ License: MIT · Design: Tailark mist (MIT) · logo-cloud/one Requires: tokens.css Context: landing · Density: baja · Tone: editorial ## Files - Tokens (once): https://componentes-lovat.vercel.app/tokens.css - HTML: https://componentes-lovat.vercel.app/raw/logos/logos.html - CSS: https://componentes-lovat.vercel.app/raw/logos/logos.css - Everything in one file: https://componentes-lovat.vercel.app/r/logos.html Dark theme: add class `dark` to ``. ## When to use - Below the hero, to build trust. ## When not to use - With logos you don't have permission to use. ## Accessibility Roles: list - A list with the names as text: screen readers and agents read them. - The scrolling variant pauses on hover and stops with reduced motion; the duplicated copy is hidden from screen readers. ## Code ```html

Confían en nosotros:

Variante en movimiento (se detiene al pasar el ratón y con «reducir movimiento»):

  • Norte
  • Vela Labs
  • Tallyworks
  • Harbor
  • Kilómetro
``` ```css /* logos · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI). Generado por tools/build_css.py desde logos.tw.json. No editar a mano. Necesita tokens.css. */ .s-logos__inner{margin-inline:auto} .s-logos__list{margin-top:calc(var(--spacing)*4);display:flex} .s-logos__inner{max-width:var(--container-5xl)} .s-logos__list{align-items:center;gap:calc(var(--spacing)*12)} .s-logos__inner{padding-inline:calc(var(--spacing)*6);padding-block:calc(var(--spacing)*8)} .s-logos__label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-muted-foreground)} /* propio */ .s-logos__list{flex-wrap:wrap;row-gap:1.25rem;list-style:none;margin-bottom:0;padding:0} .s-logos__item{display:inline-flex;align-items:center;gap:.5rem;color:var(--foreground);font-weight:600;letter-spacing:-.02em;font-size:1.0625rem} .s-logos__item svg{width:1.25rem;height:1.25rem;fill:currentColor} .s-logos--marquee .s-logos__track{overflow:hidden} .s-logos--marquee .s-logos__list{flex-wrap:nowrap;width:max-content;animation:s-logos-slide 28s linear infinite} .s-logos--marquee .s-logos__track:hover .s-logos__list{animation-play-state:paused} @keyframes s-logos-slide{to{translate:-50% 0}} @media (prefers-reduced-motion:reduce){.s-logos--marquee .s-logos__list{animation:none;flex-wrap:wrap;width:auto}.s-logos--marquee [aria-hidden=true]{display:none}} ``` ## Credits - Tailark mist (MIT) · logo-cloud/one: https://github.com/tailark/blocks