# Stats / Estadísticas

> Four large figures with their labels.

Page: https://componentes-lovat.vercel.app/c/stats/  
License: MIT · Design: Tailark mist (MIT) · stats/two  
Requires: tokens.css  
Context: landing · Density: baja · Tone: editorial

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/stats/stats.html
- CSS: https://componentes-lovat.vercel.app/raw/stats/stats.css
- Everything in one file: https://componentes-lovat.vercel.app/r/stats.html

Dark theme: add class `dark` to `<html>`.

## When to use

- To show traction or results.

## When not to use

- With figures you can't back up.

## Accessibility

Roles: term, definition

- Definition list (dl): screen readers pair each figure with its label.

## Code

```html
<section class="s-stats" aria-labelledby="stats-title">
  <div class="s-stats__inner">
    <h2 class="s-stats__title" id="stats-title">En cifras</h2>
    <p class="s-stats__lead">Números de ejemplo para mostrar el crecimiento de tu producto.</p>
    <dl class="s-stats__grid">
      <div class="s-stats__item"><dt class="s-stats__label">Componentes</dt><dd class="s-stats__value">30</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Dependencias</dt><dd class="s-stats__value">0</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Temas</dt><dd class="s-stats__value">2</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Licencia</dt><dd class="s-stats__value">MIT</dd></div>
    </dl>
  </div>
</section>
```

```css
/* stats · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde stats.tw.json. No editar a mano. Necesita tokens.css. */
.s-stats__inner{margin-inline:auto}
.s-stats__lead{margin-top:calc(var(--spacing)*4)}
.s-stats__grid{margin-top:calc(var(--spacing)*8);display:grid}
.s-stats__inner{max-width:var(--container-5xl)}
.s-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--spacing)*4)}
.s-stats{background-color:var(--color-muted)}
@supports (color:color-mix(in lab, red, red)){
.s-stats{background-color:color-mix(in oklab,var(--color-muted)50%,transparent)}
}
.s-stats__inner{padding-inline:calc(var(--spacing)*6)}
.s-stats{padding-block:calc(var(--spacing)*24)}
.s-stats__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-stats__value{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-stats__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.s-stats__value{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}
.s-stats__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.s-stats__lead{text-wrap:balance}
.s-stats__value{color:var(--color-foreground)}
.s-stats__lead{color:var(--color-muted-foreground)}
.s-stats__label{color:var(--color-muted-foreground)}
@media (min-width:48rem){
.s-stats__grid{margin-top:calc(var(--spacing)*16);grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:64rem){
.s-stats__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}
}
/* propio */
.s-stats__grid{margin-bottom:0}
.s-stats__grid dd{margin:0}
.s-stats__item{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.s-stats__value{font-variant-numeric:tabular-nums}
```

## Credits

- Tailark mist (MIT) · stats/two: https://github.com/tailark/blocks