12/Contenido

Stats

Cifras grandes con etiqueta, en una caja con divisiones de 1px.

Cuatro cifras

24hTiempo de respuesta

100%Código entregado

2 semCiclo de entregas

1:1Soporte directo

HTML

<div class="cb-stats mt-0">
  <div class="cb-stat"><strong class="cb-stat__value">24h</strong><span class="cb-stat__label">Tiempo de respuesta</span></div>
  <div class="cb-stat"><strong class="cb-stat__value">100%</strong><span class="cb-stat__label">Código entregado</span></div>
  <div class="cb-stat"><strong class="cb-stat__value">2 sem</strong><span class="cb-stat__label">Ciclo de entregas</span></div>
  <div class="cb-stat"><strong class="cb-stat__value">1:1</strong><span class="cb-stat__label">Soporte directo</span></div>
</div>

Con variación

IngresosQ 48,210+12.4% vs. mes anterior

Pedidos312+3.1%

Devoluciones9−2 casos

HTML

<div class="cb-stats cb-stats--3 mt-0">
  <div class="cb-stat"><span class="cb-stat__label">Ingresos</span><strong class="cb-stat__value">Q 48,210</strong><span class="cb-stat__delta">+12.4% vs. mes anterior</span></div>
  <div class="cb-stat"><span class="cb-stat__label">Pedidos</span><strong class="cb-stat__value">312</strong><span class="cb-stat__delta">+3.1%</span></div>
  <div class="cb-stat"><span class="cb-stat__label">Devoluciones</span><strong class="cb-stat__value">9</strong><span class="cb-stat__delta cb-stat__delta--down">−2 casos</span></div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-stats`	Caja de 4 columnas (2 por debajo de 960px). Las líneas internas no dependen de la cantidad de celdas.
`.cb-stats--2`, `.cb-stats--3`	Dos o tres columnas.
`.cb-stat`	Celda.
`.cb-stat__value`	Cifra con `clamp(28px, 3.4vw, 40px)`.
`.cb-stat__label`	Etiqueta.
`.cb-stat__delta`	Variación en verde; `--down` en rojo.

Accesibilidad

No dependas solo del color en la variación: incluye el signo o el texto.