Logo Grid

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

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

Componentes requeridos

imagetypographydivider

Anatomía CSS

<div class="layoutLogoGrid">

</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-grid — structure only */
.l-logo-grid {
  padding: 32px 32px;
}
.l-logo-grid__header {
  text-align: center;
  margin-bottom: 24px;
}
.l-logo-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 768px) {
  .l-logo-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.l-logo-grid__grid img {
  height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.8;
  justify-self: center;
}