Ficha de un registro

Propuesto2026-10-02 · Propuesto por el kit; falta la revisión del founder.

Un contacto, una guía, una factura. Kōdo está a un clic y sabe que estás aquí.

Vista · datos de ejemplo

Juanito SpA

ClienteActivo76.123.456-7

Datos

Razón social: Juanito Servicios SpA
Nombre de fantasía: Juanito SpA
Persona de contacto: Juan Soto
Correo: juan@juanito.example
Dirección: Av. Ejemplo 123, Talca
Giro

Guías del mes4emitidas

Por cobrar1,25millones

Kōdo sabe que estás en Juanito SpA

Anatomía

Cabecera: avatar cuadrado, nombre grande, chips, estado y acciones
Tarjeta de datos (etiqueta arriba, valor abajo)
Tarjetas de datos del registro
Caja de Kōdo con sugerencias de este registro

Sí

Los tres nombres del cliente separados: persona de contacto, razón social, nombre de fantasía
Campo vacío = 'Sin dato' gris

No edites en línea sin un botón Editar
No pongas acciones peligrosas sueltas: van en el menú Más

HTML exacto

<div class="nu-registro">
  <div class="nu-registro__cabeza">
    <span class="nu-registro__avatar">J</span>
    <div class="nu-registro__titulos">
      <h1 class="nu-registro__nombre">Juanito SpA</h1>
      <div class="nu-registro__sub"><span class="nu-chip">Cliente</span><span class="nu-estado nu-estado--en-linea">Activo</span><span>76.123.456-7</span></div>
    </div>
    <div class="nu-registro__acciones">
      <button type="button" class="nu-boton"><span class="nu-icono nu-icono--chico" data-icono="edit"></span>Editar</button>
      <span class="nu-desplegable">
        <button type="button" class="nu-boton" aria-haspopup="menu" aria-expanded="false" aria-controls="mas-juanito" aria-label="Más acciones"><span class="nu-icono nu-icono--chico" data-icono="more_options"></span></button>
        <span role="menu" class="nu-desplegable__menu nu-desplegable__menu--derecha" id="mas-juanito" hidden>
          <button type="button" role="menuitem" class="nu-desplegable__opcion">Nueva guía</button>
          <button type="button" role="menuitem" class="nu-desplegable__opcion">Nueva factura</button>
          <span class="nu-desplegable__separador"></span>
          <button type="button" role="menuitem" class="nu-desplegable__opcion nu-desplegable__opcion--peligro">Archivar</button>
        </span>
      </span>
    </div>
  </div>
  <div style="display:flex;flex-direction:column;gap:16px;min-width:0">
    <section class="nu-tarjeta">
      <div class="nu-tarjeta__cabeza"><span class="nu-etiqueta nu-etiqueta--bloque">Datos</span></div>
      <dl class="nu-campos nu-tarjeta__cuerpo">
        <div><dt>Razón social</dt><dd>Juanito Servicios SpA</dd></div>
        <div><dt>Nombre de fantasía</dt><dd>Juanito SpA</dd></div>
        <div><dt>Persona de contacto</dt><dd>Juan Soto</dd></div>
        <div><dt>Correo</dt><dd>juan@juanito.example</dd></div>
        <div><dt>Dirección</dt><dd>Av. Ejemplo 123, Talca</dd></div>
        <div><dt>Giro</dt><dd></dd></div>
      </dl>
    </section>
    <div class="nu-franja">
      <div class="nu-dato"><span class="nu-dato__etiqueta">Guías del mes</span><span class="nu-dato__valor"><span class="nu-dato__numero">4</span><span class="nu-dato__unidad">emitidas</span></span></div>
      <div class="nu-dato"><span class="nu-dato__etiqueta">Por cobrar</span><span class="nu-dato__valor"><span class="nu-dato__numero">1,25</span><span class="nu-dato__unidad">millones</span></span></div>
    </div>
  </div>
  <div class="nu-pedir-kodo">
    <div class="nu-kodo__encabezado"><img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="16" height="16"><span class="nu-etiqueta">Kōdo sabe que estás en Juanito SpA</span></div>
    <div class="nu-fichas">
      <button type="button" class="nu-ficha">Hazme una guía</button>
      <button type="button" class="nu-ficha">¿Qué me debe?</button>
      <button type="button" class="nu-ficha">Escríbele por el atraso</button>
    </div>
  </div>
</div>

Clases: .nu-registro .nu-registro__cabeza .nu-tarjeta .nu-campos .nu-pedir-kodo · Fragmento: snippets/record-detail.html