Marquee de Features

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}}{{eyebrow}}{{heading}}{{card1_image}}{{card1_alt}}{{card1_title}}{{card1_text}}{{card2_image}}{{card2_alt}}{{card2_title}}{{card2_text}}{{card3_image}}{{card3_alt}}{{card3_title}}{{card3_text}}{{card4_image}}{{card4_alt}}{{card4_title}}{{card4_text}}{{card5_image}}{{card5_alt}}{{card5_title}}{{card5_text}}{{prev_label}}{{next_label}}

Componentes requeridos

feature-cardmarqueemarquee-draggable

Anatomía CSS

<div class="layoutMarqueeFeatures">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

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

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

.l-marquee-features__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  margin-block-end: 80px;
  padding-inline: 24px;
  max-width: 42rem;
}

.l-marquee-features__eyebrow {
  color: #525252;
  font-size: 12.8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.l-marquee-features__title {
  margin: 0;
}

/* La tira sangra a todo el ancho aunque la seccion tenga container: parte de
   la gracia es que las cards salgan por los bordes. */
.l-marquee-features .marquee__item {
  padding: 8px;
  white-space: normal;
}