Metrics 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

{{section_id}}{{eyebrow}}{{heading}}{{media1_src}}{{media1_alt}}{{card1_value}}{{card1_label}}{{card1_text}}{{card2_value}}{{card2_label}}{{card2_text}}{{card3_value}}{{card3_label}}{{card3_text}}{{card4_value}}{{card4_label}}{{card4_text}}{{media2_poster}}{{media2_webm}}{{media2_mp4}}

Componentes requeridos

feature-cardtypography

Anatomía CSS

<div class="layoutMetricsGrid">

</div>

CSS mínimo funcional

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

/* Layout: metrics-grid — structure only, pure DS tokens */
.l-metrics-grid {
  padding-block: 125px;
  padding-inline: 5%;
}

.l-metrics-grid__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline: auto;
  margin-block-end: 80px;
  max-width: 80rem;
}

.l-metrics-grid__eyebrow {
  margin: 0;
  font-size: 12.8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.l-metrics-grid__title {
  margin: 0;
}

.l-metrics-grid__list {
  display: grid;
  gap: 32px;
  margin-inline: auto;
  max-width: 80rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* El ancho, el relleno y el recorte los ponen los modificadores del componente
   (--fill, --media, __media--fill), no selectores descendentes desde aqui: asi
   el canal de Webflow puede reproducirlos con combo classes. */
.l-metrics-grid__list video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}