Logos de clientesLogo cloud

Franja «confían en nosotros», fija o en movimiento continuo.“Trusted by” strip, static or scrolling.

DiseñoDesign: Tailark mist (MIT) · logo-cloud/oneMITlanding · densidaddensity baja · editorialMarkdown JSON

CódigoCode

<section class="s-logos" aria-labelledby="logos-label">
  <div class="s-logos__inner">
    <p class="s-logos__label" id="logos-label">Confían en nosotros:</p>
    <ul class="s-logos__list">
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
    </ul>
  </div>
</section>

<section class="s-logos s-logos--marquee" aria-label="Clientes (en movimiento)">
  <div class="s-logos__inner">
    <p class="s-logos__label">Variante en movimiento (se detiene al pasar el ratón y con «reducir movimiento»):</p>
    <div class="s-logos__track">
      <ul class="s-logos__list">
        <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
      </ul>
    </div>
  </div>
</section>

/* 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}}

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logos de clientes · Componentes</title>
<!-- Logos de clientes · Componentes (MIRÓ Labs) · MIT · https://componentes-lovat.vercel.app/c/logos/
     Diseño: Tailark mist (MIT) · logo-cloud/one -->
<script>(function(){var d=document.documentElement,p=new URLSearchParams(location.search),q=p.get('theme');d.classList.toggle('dark',q?q==='dark':matchMedia('(prefers-color-scheme: dark)').matches);if(self!==top)d.classList.add('embed');addEventListener('message',function(e){if(e.data&&e.data.type==='componentes:theme')d.classList.toggle('dark',!!e.data.dark)});})();</script>
<style>
/* Componentes (MIRÓ Labs) · tokens. Tema de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py. Tema oscuro: clase .dark en <html> (los componentes usan esa clase).
   Letra: la del sistema; cambia --font-sans para usar otra. */
:root{--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--color-amber-400:lab(80.1641% 16.6016 99.2089);--color-amber-500:lab(72.7183% 31.8672 97.9407);--color-amber-700:lab(47.2709% 42.9082 69.2966);--color-background:var(--background);--color-black:#000;--color-blue-400:lab(65.0361% -1.42065 -56.9802);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-blue-700:lab(36.9089% 35.0961 -85.6872);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-cyan-900:lab(30.372% -13.1853 -18.7887);--color-emerald-400:lab(75.0771% -60.7313 19.4147);--color-emerald-500:lab(66.9756% -58.27 19.5419);--color-emerald-700:lab(44.4871% -41.0396 11.0361);--color-foreground:var(--foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-neutral-100:lab(96.52% -.0000298023 .0000119209);--color-neutral-400:lab(66.128% -.0000298023 .0000119209);--color-neutral-50:lab(98.26% 0 0);--color-neutral-500:lab(48.496% 0 0);--color-neutral-800:lab(15.204% 0 -.00000596046);--color-neutral-950:lab(2.75381% 0 0);--color-orange-600:lab(57.1026% 64.2584 89.8886);--color-primary:var(--primary);--color-purple-500:lab(52.0183% 66.11 -78.2316);--color-red-400:lab(63.7053% 60.745 31.3109);--color-red-500:lab(55.4814% 75.0732 48.8528);--color-red-700:lab(40.4273% 67.2623 53.7441);--color-rose-500:lab(56.101% 79.4328 31.4532);--color-teal-600:lab(55.0223% -41.0774 -3.90277);--color-white:#fff;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-lg:32rem;--container-md:28rem;--container-sm:24rem;--container-xl:36rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--font-weight-bold:700;--font-weight-medium:500;--font-weight-normal:400;--font-weight-semibold:600;--radius-2xl:1rem;--radius-lg:var(--radius);--radius-md:calc(var(--radius) - 2px);--radius-xl:calc(var(--radius) + 4px);--spacing:.25rem;--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--tracking-tight:-.025em;--tracking-widest:.1em;--tw-shadow-color:#000}
:root{--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root{--radius:.625rem;--background:var(--color-white);--foreground:var(--color-neutral-800);--card:var(--color-white);--card-foreground:var(--color-neutral-800);--popover:var(--color-white);--popover-foreground:var(--color-neutral-800);--primary:var(--color-neutral-800);--primary-foreground:var(--color-neutral-50);--secondary:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--secondary:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--secondary-foreground:var(--color-neutral-800);--muted:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--muted:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--muted-foreground:#686868}
@supports (color:color-mix(in lab, red, red)){:root{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-black))}}
:root{--accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--accent-foreground:var(--color-neutral-800);--destructive:var(--color-red-500);--destructive-foreground:var(--color-red-700);--info:var(--color-blue-500);--info-foreground:var(--color-blue-700);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-700);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-700);--border:#00000014}
@supports (color:color-mix(in lab, red, red)){:root{--border:color-mix(in oklab,var(--color-black)8%,transparent)}}
:root{--input:#0000001a}
@supports (color:color-mix(in lab, red, red)){:root{--input:color-mix(in oklab,var(--color-black)10%,transparent)}}
:root{--ring:var(--color-neutral-400);--chart-1:var(--color-orange-600);--chart-2:var(--color-teal-600);--chart-3:var(--color-cyan-900);--chart-4:var(--color-amber-400);--chart-5:var(--color-amber-500);--sidebar:var(--color-neutral-50);--sidebar-foreground:#262626}
@supports (color:lab(0% 0 0)){:root{--sidebar-foreground:lab(15.204% 0 -.00000596046)}}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-800)64%,var(--sidebar))}}
:root{--sidebar-primary:var(--color-neutral-800);--sidebar-primary-foreground:var(--color-neutral-50);--sidebar-accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--sidebar-accent-foreground:var(--color-neutral-800);--sidebar-border:#0000000f}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-border:color-mix(in oklab,var(--color-black)6%,transparent)}}
:root{--sidebar-ring:var(--color-neutral-400);--code:var(--color-white);--code-foreground:var(--foreground);--code-highlight:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in oklab,var(--color-black)4%,transparent)}}
.dark{--background:#141414}
@supports (color:color-mix(in lab, red, red)){.dark{--background:color-mix(in srgb,var(--color-neutral-950)96%,var(--color-white))}}
.dark{--foreground:var(--color-neutral-100);--card:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--card:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--card-foreground:var(--color-neutral-100);--popover:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--popover:color-mix(in srgb,var(--background)96%,var(--color-white))}}
.dark{--popover-foreground:var(--color-neutral-100);--primary:var(--color-neutral-100);--primary-foreground:var(--color-neutral-800);--secondary:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--secondary:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--secondary-foreground:var(--color-neutral-100);--muted:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--muted:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--muted-foreground:#818181}
@supports (color:color-mix(in lab, red, red)){.dark{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-white))}}
.dark{--accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--accent-foreground:var(--color-neutral-100);--destructive:#fb414a}
@supports (color:color-mix(in lab, red, red)){.dark{--destructive:color-mix(in srgb,var(--color-red-500)90%,var(--color-white))}}
.dark{--destructive-foreground:var(--color-red-400);--info:var(--color-blue-500);--info-foreground:var(--color-blue-400);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-400);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-400);--border:#ffffff0f}
@supports (color:color-mix(in lab, red, red)){.dark{--border:color-mix(in oklab,var(--color-white)6%,transparent)}}
.dark{--input:#ffffff14}
@supports (color:color-mix(in lab, red, red)){.dark{--input:color-mix(in oklab,var(--color-white)8%,transparent)}}
.dark{--ring:var(--color-neutral-500);--chart-1:var(--color-blue-700);--chart-2:var(--color-emerald-500);--chart-3:var(--color-amber-500);--chart-4:var(--color-purple-500);--chart-5:var(--color-rose-500);--sidebar:#111}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar:color-mix(in srgb,var(--color-neutral-950)97%,var(--color-white))}}
.dark{--sidebar-foreground:#f5f5f5}
@supports (color:lab(0% 0 0)){.dark{--sidebar-foreground:lab(96.52% -.0000298023 .0000119209)}}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-100)64%,var(--sidebar))}}
.dark{--sidebar-primary:var(--color-neutral-100);--sidebar-primary-foreground:var(--color-neutral-800);--sidebar-accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--sidebar-accent-foreground:var(--color-neutral-100);--sidebar-border:#ffffff0d}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-border:color-mix(in oklab,var(--color-white)5%,transparent)}}
.dark{--sidebar-ring:var(--color-neutral-400);--code:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--code:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--code-foreground:var(--foreground);--code-highlight:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in oklab,var(--color-white)4%,transparent)}}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){box-sizing:border-box;border:0 solid;margin:0;padding:0}
:where([class*="c-"]) :where(button,input,select,textarea,optgroup){font:inherit;font-feature-settings:inherit;letter-spacing:inherit;color:inherit;background-color:transparent;border-radius:0}
:where([class*="c-"]) :where(button,[type=button],[type=reset],[type=submit]){appearance:button}
:where([class*="c-"]) :where(img,svg,video,canvas){display:block;vertical-align:middle}
:where([class*="c-"]) :where(a){color:inherit;text-decoration:inherit}
:where([class*="c-"]) :where(ol,ul,menu){list-style:none}
:where([class*="c-"]) :where(table){text-indent:0;border-color:inherit;border-collapse:collapse}
:where([class*="c-"]) :where([hidden]:not([hidden=until-found])){display:none!important}
:where([class*="c-"]){border-color:var(--border);outline-color:var(--ring)}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-mask-linear:linear-gradient(#fff,#fff);--tw-mask-radial:linear-gradient(#fff,#fff);--tw-mask-conic:linear-gradient(#fff,#fff);--tw-mask-left:linear-gradient(#fff,#fff);--tw-mask-right:linear-gradient(#fff,#fff);--tw-mask-bottom:linear-gradient(#fff,#fff);--tw-mask-top:linear-gradient(#fff,#fff);--tw-mask-top-from-position:0%;--tw-mask-top-to-position:100%;--tw-mask-top-from-color:black;--tw-mask-top-to-color:transparent;--tw-mask-right-from-position:0%;--tw-mask-right-to-position:100%;--tw-mask-right-from-color:black;--tw-mask-right-to-color:transparent;--tw-mask-bottom-from-position:0%;--tw-mask-bottom-to-position:100%;--tw-mask-bottom-from-color:black;--tw-mask-bottom-to-color:transparent;--tw-mask-left-from-position:0%;--tw-mask-left-to-position:100%;--tw-mask-left-from-color:black;--tw-mask-left-to-color:transparent;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-border-spacing-x:0;--tw-border-spacing-y:0}
@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
@property --tw-content{syntax:"*";inherits:false;initial-value:""}
@property --tw-duration{syntax:"*";inherits:false}
@property --tw-ease{syntax:"*";inherits:false}
@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow-color{syntax:"*";inherits:false}
@property --tw-leading{syntax:"*";inherits:false}
@property --tw-ring-color{syntax:"*";inherits:false}
@property --tw-ring-inset{syntax:"*";inherits:false}
@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}
@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}
@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}
@property --tw-shadow-color{syntax:"*";inherits:false}
@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){:where([class*="c-"], [class*="c-"] *){animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

/* 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}}

/* página de prueba */
body{margin:0;min-height:100vh;display:grid;place-items:start center;padding:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:1.5}
.c-demo{display:grid;gap:1rem;justify-items:stretch;width:100%;max-width:100%;min-width:0;justify-self:stretch;grid-template-columns:minmax(0,1fr)}
body{grid-template-columns:minmax(0,1fr)}
.embed body{background:transparent}
</style>
</head>
<body>
<div class="c-demo">
<section class="s-logos" aria-labelledby="logos-label">
  <div class="s-logos__inner">
    <p class="s-logos__label" id="logos-label">Confían en nosotros:</p>
    <ul class="s-logos__list">
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
    </ul>
  </div>
</section>

<section class="s-logos s-logos--marquee" aria-label="Clientes (en movimiento)">
  <div class="s-logos__inner">
    <p class="s-logos__label">Variante en movimiento (se detiene al pasar el ratón y con «reducir movimiento»):</p>
    <div class="s-logos__track">
      <ul class="s-logos__list">
        <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
      <li class="s-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>Norte</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 2 22 20H2z"/></svg>Vela Labs</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/></svg>Tallyworks</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M2 12h8V4h4v8h8v4h-8v4h-4v-4H2z"/></svg>Harbor</li>
        <li class="s-logos__item" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 4h16v6H4zM4 14h16v6H4z"/></svg>Kilómetro</li>
      </ul>
    </div>
  </div>
</section>
</div>

</body>
</html>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
Copia los archivos:Copy the files: logos.html, logos.css.
Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

Debajo del hero, para dar confianza.

Below the hero, to build trust.

Mejor noAvoid

Con logos sin permiso de sus dueños.

With logos you don't have permission to use.

list

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.

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.

Cómo probarloHow to test it

Activa «reducir movimiento»: la franja deja de moverse y no se repiten nombres.

Turn on reduced motion: the strip stops and names are not repeated.

CréditosCredits

Tailark mist (MIT) · logo-cloud/one