{ "name": "logos", "title": { "es": "Logos de clientes", "en": "Logo cloud" }, "summary": { "es": "Franja «confían en nosotros», fija o en movimiento continuo.", "en": "“Trusted by” strip, static or scrolling." }, "category": "sections", "status": "stable", "nivel": "componentes", "updated": "2026-09-30", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/logos/", "requires": [], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/logos/logos.html", "content": "
\n
\n

Confían en nosotros:

\n \n
\n
\n\n
\n
\n

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

\n
\n
    \n
  • Norte
    • \n
  • Vela Labs
    • \n
  • Tallyworks
    • \n
  • Harbor
    • \n
  • Kilómetro
    • \n
  • Norte
    • \n
  • Vela Labs
    • \n
  • Tallyworks
    • \n
  • Harbor
    • \n
  • Kilómetro
    • \n
\n
\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/logos/logos.css", "content": "/* logos · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde logos.tw.json. No editar a mano. Necesita tokens.css. */\n.s-logos__inner{margin-inline:auto}\n.s-logos__list{margin-top:calc(var(--spacing)*4);display:flex}\n.s-logos__inner{max-width:var(--container-5xl)}\n.s-logos__list{align-items:center;gap:calc(var(--spacing)*12)}\n.s-logos__inner{padding-inline:calc(var(--spacing)*6);padding-block:calc(var(--spacing)*8)}\n.s-logos__label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-muted-foreground)}\n/* propio */\n.s-logos__list{flex-wrap:wrap;row-gap:1.25rem;list-style:none;margin-bottom:0;padding:0}\n.s-logos__item{display:inline-flex;align-items:center;gap:.5rem;color:var(--foreground);font-weight:600;letter-spacing:-.02em;font-size:1.0625rem}\n.s-logos__item svg{width:1.25rem;height:1.25rem;fill:currentColor}\n.s-logos--marquee .s-logos__track{overflow:hidden}\n.s-logos--marquee .s-logos__list{flex-wrap:nowrap;width:max-content;animation:s-logos-slide 28s linear infinite}\n.s-logos--marquee .s-logos__track:hover .s-logos__list{animation-play-state:paused}\n@keyframes s-logos-slide{to{translate:-50% 0}}\n@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}}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/logos.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "landing", "densidad": "baja", "tono": "editorial", "states": [ "rest" ], "use": { "es": [ "Debajo del hero, para dar confianza." ], "en": [ "Below the hero, to build trust." ] }, "avoid": { "es": [ "Con logos sin permiso de sus dueños." ], "en": [ "With logos you don't have permission to use." ] }, "a11y": { "roles": [ "list" ], "keyboard": [], "notes": { "es": [ "Lista con los nombres en texto: el lector y los agentes los leen.", "La variante en movimiento se pausa al pasar el ratón y se detiene con «reducir movimiento»; la copia duplicada queda oculta al lector." ], "en": [ "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." ] }, "test": { "es": [ "Activa «reducir movimiento»: la franja deja de moverse y no se repiten nombres." ], "en": [ "Turn on reduced motion: the strip stops and names are not repeated." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "Tailark mist (MIT) · logo-cloud/one", "url": "https://github.com/tailark/blocks" } ], "changes": [ { "date": "2026-09-30", "es": "Diseño de Tailark mist en HTML y CSS sin dependencias", "en": "Tailark mist design in dependency-free HTML and CSS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/logos.html" }