27 · Interfaz en vivo

Componentes: navegación, tablas y alertas

Los componentes que organizan información y avisan al usuario. Las alertas son el caso más delicado en una marca sin color: aquí se resuelve con forma y texto.

Vista previa

Pestañas

Contenido de «Resumen».

Navegación superior

El enlace de la página actual lleva subrayado de 2 px y aria-current="page". No se distingue solo por color.

Tablas

Facturas de ejemplo
Cliente	Fecha	Monto	Estado
Cliente de ejemplo A	02/11/2026	Bs. 1.250,00	Pagada
Cliente de ejemplo B	30/10/2026	Bs. 8.400,50	Pendiente
Cliente de ejemplo C	15/10/2026	Bs. 320,00	Vencida

Datos ficticios. Cifras alineadas a la derecha con números tabulares; el estado siempre lleva ícono y palabra.

Alertas

InformaciónHoy hacemos un mantenimiento programado. Te avisamos cuando termine.

ListoGuardamos tu cambio.

AtenciónEste módulo está en prueba. Revisa los totales antes de usarlos.

No se pudo guardarRevisa tu conexión y vuelve a intentarlo.

Tipo	Ícono	Borde	Rol ARIA
Información	Círculo con i	1 px, barra de 4 px	status
Éxito	Círculo con marca	1 px, barra de 4 px	status
Atención	Triángulo	Punteado, barra de 4 px	status
Error	Círculo con X	2 px, barra de 6 px	alert

Código

<div class="nt-alert nt-alert--error" role="alert">
  <svg ... aria-hidden="true">...</svg>
  <div><b>No se pudo guardar</b>Revisa tu conexión y vuelve a intentarlo.</div>
</div>

<table class="nt-table">
  <caption class="sr">Facturas</caption>
  <thead><tr><th scope="col">Cliente</th><th scope="col" class="num">Monto</th></tr></thead>
  ...
</table>

Las variables y el CSS completo están en Componentes: botones, campos y tarjetas.