Esta tipología de header se utiliza para sitio informativos o landingpages con pocas secciones o contenidos a exponer.

La esctructura es simple, se compone del logo de la institución, la barra de accesibilidad universal y el menú principal alineado a la derecha de la pantalla.

El tema oscuro es utilizado en aquellos sitios que cumplen una función de gobierno o de algúin programa inter-ministerial. En la mayorpáid e los casos, lleban el logo de gobierno o de las instituciones comprometidas.

Este formato se utiliza en aquellos sitios que deben relevanr información de segunda o tercera prioridad, pero que se requiere que esté siempre disponible para el usuario.

Este formato se utiliza en sitios que no requieren destacar información relevenate en el pie de página. Asi como en algunos sistemas o portales donde la información se presenta en otros espacios.

Utilizar un chip cuando la persona usuaria necesite interactuar con el elemento, los chips son para:

• Filtrar contenidos.
• Seleccionar una o varias opciones.
• Representar entradas generadas por la persona usuaria (ej.: intereses, etiquetas escritas en un input).
• Activar o desactivar criterios dentro de una vista dinámica.

Utilizar un tag cuando se necesite comunicar información contextual o de estado que no requiere interacción. Los tags mejoran la lectura y comprensión rápida de contenidos, son útiles para:

• Mostrar el estado de un trámite.
• Indicar la disponibilidad o categoría de un contenido.
• Destacar clasificaciones o atributos especiales.

Se utiliza para comunicar información importante que requiere atención inmediata de la persona usuaria. Se recomienda usarla con moderación para no generar fatiga visual.

Recomendaciones de uso

• Ubicar la alerta donde la persona usuaria está interactuando, cercana al elemento que produjo el mensaje o en la parte superior del contenido principal si es global.
• Evitar usar alertas para mensajes triviales o redundantes para no generar ruido visual.
• Evitar textos extensos, la persona usuaria debe captar el mensaje en pocos segundos.
• El uso del botón incluido en la alerta es opcional, si no hay una acción clara que resuelva el problema, omitir su uso.
• Evitar múltiples alertas en una pantalla, mostrar lo más relevante o agrupar los mensajes si corresponde.

Se utilizan para informar eventos o actualizaciones relevantes para la persona usuaria. Pueden aparecer dentro o fuera del flujo principal. Se recomienda priorizar solo información realmente importante.

Casos de uso

La estructura de las notificaciones comprenden 3 estados:

• Abierta: Fondo blanco, incluye título, textos complementarios y botones.
• Nueva: Fondo blanco.
• Leída: Fondo gris.

Se utilizan para presentar información o acciones que requieren foco exclusivo de la persona usuaria. Bloquean temporalmente la interacción con el resto de la interfaz. Se recomienda evitar modalesencadenados y limitar su uso a acciones relevantes.

Recomendaciones de uso

• Utilizar únicamente cuando la persona usuaria debe detener su flujo para prestar atención o tomar una decisión crítica.
• Si la información se puede mostrar dentro de la misma pantalla, optar por componentes que generen menos fricción que un modal.
• El contenido debe ser acotado, directo y escaneable, evitar información irrelevante dentro del modal.
• En el caso de modales de decisión, el botón principal debe describir la acción exacta que la persona usuaria va a ejecutar y el botón secundario debe funcionar como una salida segura (Cancelar / Volver).
• Evitar mostrar múltiples modales encadenados en una secuencia, un segundo modal al cerrar el primero genera confusión y riesgo de error, asimismo evitar modales anidados (uno sobre otro, abiertos simultáneamente).

Se utiliza para mostrar feedback breve sobre una acción realizada. Aparece de forma temporal y no interrumpe el flujo principal. Se recomienda para confirmaciones simples o estados informativos. Limitar su uso a dispositivos mobile, evitar uso en desktop.

Recomendaciones de uso

• Utilizar para mensajes breves y no intrusivos: confirmaciones, avisos temporales, acciones únicas, etc.
• No deben usarse para errores críticos, en ese caso, utilizar una alerta.
• Debido a que son mensajes de corta duración, no deberían contener demasiada información.

Los Breadcrumb o "migas de pan", se utilizan para mostrar la jerarquía de navegación y la ubicación actual de la persona usuaria. Facilitan la orientación dentro de estructuras profundas. Se recomienda usarlas en secciones con más de dos niveles.

Recomendaciones de uso

• Posicionar en la parte superior de la pantalla para dar contexto al contenido.
• Este componente solo existe para desktop. Para la versión mobile se debe utilizar el botón de enlace para volver a la página anterior.
• Utilizar las variables para determinar la cantidad de enlaces que tiene el breadcrumb.

Se utiliza para dividir contenido extenso en múltiples páginas. Mejora el rendimiento y la legibilidad. Se recomienda cuando el contenido no puede cargarse o mostrarse de una sola vez.

Recomendaciones de uso

• El paginador debe posicionarse justo debajo del listado o tabla con páginas.
• Existen 3 instancias del paginador:
  • Solo páginas.
  • Páginas + salto a la página.
  • Páginas + selector con la cantidad de registros por páginas.