Fundamentos, patrones y componentes del Design System con estructura guiada.
Listado completo de componentes incluidos en este grupo.
Header + body con acciones
| Componente | Tipo |
|---|---|
| ListCard | Superficie |
| LogListCard | Actividad |
Lista compacta con prefix/suffix, chevron y estado vacío.
Con avatar y meta
Erika Ramírez
Analista de RH · Activo
Carlos Núñez
Coordinador · Pendiente firma
Sofía Ledesma
Líder de sede · Activo
Con icono y suffix
Equipos
Estructura y responsables
Sucursales
Ubicaciones activas
Configuración
Preferencias y catálogos
Estado vacío
Fila reusable — puede ir suelta o embebida en cualquier contenedor.
Ana Torres
Directora de Operaciones
Reporte semanal
Última actualización hace 3 min
Superficie informativa para mensajes de apoyo.
Card de foco con icono y footer
Superficies para insights AI y prompts copiables.
Ejemplo de prompt listo para pedir una pantalla siguiendo el design system.
Necesito crear /operaciones/reportes usando el patron full-table.
Datos mock, sin backend.
Restricciones: sin colores hardcoded, usar PageSubHeader.
Aceptacion:
- Un solo header visible.
- Filtros y busqueda funcionan.
- Estados loading/error/empty cubiertos.Aceptacion
- Se aplica el patron full-table sin variantes locales
- Estados de carga y vacío cubiertos
- Build pasa sin errores
LogListCard, LogListRecordCard y VerticalTimeline.
LogListCard
Sistema actualizó estatus
09:45
Ana Torres solicitó aprobación
10:12
Sistema detectó documento vencido
10:30
LogListRecordCard (inline)
VerticalTimeline
Alta de colaborador
Onboarding iniciado
Firma documental
Contrato firmado
Asignación de equipo
Se asignó laptop y accesos
Headers sticky de detalle y widget de asistencia semanal.
StickyHeader
Meta
95%
Actual
91%
| Fecha | Entrada | Inicio comida | Fin comida | Salida | Horas trabajadas | Retardo | Salida temprano |
|---|---|---|---|---|---|---|---|
Miércoles 1 | 08:01 | 14:00 | 14:40 | 17:10 | 08:29 | 00:01 | 00:00 |
Jueves 2 | 07:58 | 14:05 | 14:50 | 17:20 | 08:27 | 00:00 | 00:00 |
Viernes 3 | Home Office | 08:00 | 00:00 | 00:00 | |||
Sábado 4 | Descanso | 00:00 | 00:00 | 00:00 | |||
Domingo 5 | 08:04 | 17:02 | 08:10 | 00:04 | 00:00 | ||
Lunes 6 | 08:00 | 17:00 | 08:20 | 00:00 | 00:00 | ||
Martes 7 | Descanso | 00:00 | 00:00 | 00:00 | |||
| 33:26 | 00:05 | 00:00 | |||||