Logos Marquee

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{section_id}}{{headline}}{{logo1}}{{logo1_name}}{{logo2}}{{logo2_name}}{{logo2_scale}}{{logo3}}{{logo3_name}}{{logo4}}{{logo4_name}}{{logo5}}{{logo5_name}}{{logo6}}{{logo6_name}}{{logo7}}{{logo7_name}}{{logo8}}{{logo8_name}}

Componentes requeridos

marqueemarquee-csstypography

Anatomía CSS

<div class="layoutLogoMarquee">

</div>

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: logo-marquee — structure only, pure DS tokens */
.l-logo-marquee {
  padding-block: 100px;
  overflow: hidden;
}

/* El DS no publica tokens de contenedor: el ancho maximo y el gutter son
   convencion del sitio consumidor (container-large = 80rem, padding-global =
   5%). Van como variables para que otro consumidor los cambie sin tocar el
   layout. */
.l-logo-marquee__gutter {
  padding-inline: 5%;
}

.l-logo-marquee__container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.l-logo-marquee__headline {
  margin: 0 0 32px;
  text-align: left;
  font-size: 25px;
}

/* La tira sangra a todo el ancho aunque la seccion tenga container: el recorte
   lateral es lo que comunica que la lista sigue. */
.l-logo-marquee .marquee__item {
  padding-inline: 32px;
}