Tarjetas de datos

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

La franja de números del Inicio y de una ficha: número grande + etiqueta chica.

Vista · datos de ejemplo

Usuarios 3activos

Archivos 0,2MB de 1 GB

IA de Kōdo 12% del mes

Para hoy 2pendientes Ver pendientes

Anatomía

Etiqueta de sistema
Número de 30 px navy con su unidad gris
Barra de puntos opcional (20 pasos)
Enlace naranja opcional

Sí

Pegadas con borde de 1 px
Datos reales o la tarjeta no aparece

No inventes cifras ni pongas ceros de relleno
No uses gráficos de torta ni colores extra

HTML exacto

<div class="nu-franja" role="list">
  <div class="nu-dato" role="listitem">
    <span class="nu-dato__etiqueta">Usuarios</span>
    <span class="nu-dato__valor"><span class="nu-dato__numero">3</span><span class="nu-dato__unidad">activos</span></span>
  </div>
  <div class="nu-dato" role="listitem">
    <span class="nu-dato__etiqueta">Archivos</span>
    <span class="nu-dato__valor"><span class="nu-dato__numero">0,2</span><span class="nu-dato__unidad">MB de 1 GB</span></span>
    <span class="nu-puntos" aria-label="1 % usado">
      <span class="nu-punto" data-lleno="true"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span>
    </span>
  </div>
  <div class="nu-dato" role="listitem">
    <span class="nu-dato__etiqueta">IA de Kōdo</span>
    <span class="nu-dato__valor"><span class="nu-dato__numero">12</span><span class="nu-dato__unidad">% del mes</span></span>
    <span class="nu-puntos" aria-label="12 % usado">
      <span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span>
    </span>
  </div>
  <div class="nu-dato" role="listitem">
    <span class="nu-dato__etiqueta">Para hoy</span>
    <span class="nu-dato__valor"><span class="nu-dato__numero">2</span><span class="nu-dato__unidad">pendientes</span></span>
    <a class="nu-enlace" href="/approvals">Ver pendientes</a>
  </div>
</div>

Clases: .nu-franja .nu-dato .nu-dato__etiqueta .nu-dato__numero .nu-dato__unidad .nu-puntos .nu-punto · Fragmento: snippets/stat-cards.html