Registros · record-list

Lista de registros

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

Contactos, guías, facturas: cualquier lista de una app.

Vista · datos de ejemplo

124 contactos

Nombre	RUT	Comuna	Estado	Por cobrar
JJuanito SpA	76.123.456-7	Talca	Activo	$ 1.250.000
CComercial Sur Ltda.	77.987.654-3	Curicó	Atrasado	$ 480.900
EEjemplo Valle SpA	78.555.111-K	Linares	Sin movimiento	$ 0

1–3 de 124

Anatomía

Barra: buscador, filtrar, acción principal, cuenta en etiqueta de sistema
Tabla: encabezados en etiqueta de sistema, filas de 52 px
Paginación '1–8 de 124'

Sí

Toda la fila abre la ficha
En teléfono la tabla pasa a filas apiladas con la etiqueta de cada celda
Números alineados a la derecha con cifras tabulares

No uses cebra ni colores por fila
No más de una acción principal

HTML exacto

<section class="nu-lista" aria-label="Contactos">
  <div class="nu-lista__barra">
    <label class="nu-lista__buscar"><span class="nu-icono nu-icono--chico" data-icono="search"></span><input type="search" placeholder="Buscar por nombre, RUT o correo"></label>
    <button type="button" class="nu-boton nu-boton--chico"><span class="nu-icono nu-icono--chico" data-icono="filter"></span>Filtrar</button>
    <button type="button" class="nu-boton nu-boton--chico nu-boton--principal"><span class="nu-icono nu-icono--chico" data-icono="add"></span>Nuevo contacto</button>
    <span class="nu-lista__cuenta">124 contactos</span>
  </div>
  <table class="nu-tabla">
    <thead><tr><th>Nombre</th><th>RUT</th><th>Comuna</th><th>Estado</th><th class="nu-tabla__numero">Por cobrar</th></tr></thead>
    <tbody>
      <tr>
        <td data-etiqueta="Nombre"><span class="nu-tabla__principal"><span class="nu-persona__cuadro" style="width:28px;height:28px;flex-basis:28px;font-size:13px">J</span>Juanito SpA</span></td>
        <td data-etiqueta="RUT" class="nu-tabla__sub">76.123.456-7</td>
        <td data-etiqueta="Comuna">Talca</td>
        <td data-etiqueta="Estado"><span class="nu-estado nu-estado--en-linea">Activo</span></td>
        <td data-etiqueta="Por cobrar" class="nu-tabla__numero">$ 1.250.000</td>
      </tr>
      <tr>
        <td data-etiqueta="Nombre"><span class="nu-tabla__principal"><span class="nu-persona__cuadro" style="width:28px;height:28px;flex-basis:28px;font-size:13px">C</span>Comercial Sur Ltda.</span></td>
        <td data-etiqueta="RUT" class="nu-tabla__sub">77.987.654-3</td>
        <td data-etiqueta="Comuna">Curicó</td>
        <td data-etiqueta="Estado"><span class="nu-estado nu-estado--alerta">Atrasado</span></td>
        <td data-etiqueta="Por cobrar" class="nu-tabla__numero">$ 480.900</td>
      </tr>
      <tr>
        <td data-etiqueta="Nombre"><span class="nu-tabla__principal"><span class="nu-persona__cuadro" style="width:28px;height:28px;flex-basis:28px;font-size:13px">E</span>Ejemplo Valle SpA</span></td>
        <td data-etiqueta="RUT" class="nu-tabla__sub">78.555.111-K</td>
        <td data-etiqueta="Comuna">Linares</td>
        <td data-etiqueta="Estado"><span class="nu-estado">Sin movimiento</span></td>
        <td data-etiqueta="Por cobrar" class="nu-tabla__numero">$ 0</td>
      </tr>
    </tbody>
  </table>
  <div class="nu-paginas"><span>1–3 de 124</span><button type="button" class="nu-boton nu-boton--chico" aria-label="Anterior"><span class="nu-icono nu-icono--chico" data-icono="previous"></span></button><button type="button" class="nu-boton nu-boton--chico" aria-label="Siguiente"><span class="nu-icono nu-icono--chico" data-icono="next"></span></button></div>
</section>

Clases: .nu-lista .nu-lista__barra .nu-lista__buscar .nu-tabla .nu-paginas · Fragmento: snippets/record-list.html