Components (registry)Layout
Metrics Grid
Rejilla de metricas sobre fondo oscuro. Cada card lleva cifra, etiqueta y descripcion, con el acento de un intent del sistema; entre ellas se intercalan tiles de imagen o video. La cifra usa el par *-text del intent para que se lea sobre su propio tinte.
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.
El ancho y el gutter los da .container (token --size-container-content), igual
que el resto de las secciones; antes esta rejilla inventaba 80rem/5% porque se
creia que el DS no publicaba tokens de contenedor — si los publica. */
.l-metrics-grid__header {
display: flex;
flex-direction: column;
gap: 16px;
margin-block-end: 80px;
}
.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;
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;
}
Codigo fuente
layouts/metrics-grid.css
/* Layout: metrics-grid — structure only, pure DS tokens. El ancho y el gutter los da .container (token --size-container-content), igual que el resto de las secciones; antes esta rejilla inventaba 80rem/5% porque se creia que el DS no publicaba tokens de contenedor — si los publica. */ .l-metrics-grid__header { display: flex; flex-direction: column; gap: var(--spacing-4); margin-block-end: var(--rhythm-s); } .l-metrics-grid__eyebrow { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; } .l-metrics-grid__title { margin: 0; } .l-metrics-grid__list { display: grid; gap: var(--spacing-8); 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; }