Cabeceras

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Tipos y anatomía #

Según el contexto se utiliza una de las dos cabeceras definidas:

Cabecera para sitios web o portales #

Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón, es decir, sitios webs públicos en los que hay una comunicación "unidireccional" y, normalmente, no tienen un acceso de usuarios restringido.

1. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
2. Cabecera pequeña: El logotipo debe quedar alineado a la izquierda y la banda, de 45px de altura, incluye un borde inferior de 1 px neutral-base. Este elemento se corresponde con la versión mini de la cabecera.
3. Banda con el título del sitio web: Las letras del título del sitio web irán en blanco y sin ningún logotipo sobre fondo heading-base con ornamentos en heading-dark.
4. Subtítulo: Utilízalo para el nombre extendido de los títulos con acrónimos.
5. Banda con un menú de navegación: Con fondo neutral-lighter y borde inferior neutral-base de 1 px. En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral. Este elemento es opcional.
7. Banda con Hero opcional: Sección con una altura determinada en la que se puede encajar una imagen ilustrativa de la temática del sitio, junto con un texto que incluya un título y/o subtítulo descriptivos.

Cabecera para aplicaciones web #

Se usa en intranets o aplicaciones web para escritorio o móviles y que suelen tener un acceso de usuarios restringido. Tiene menos altura al estar compuesta por una sola banda.

1. Banda gris: Tiene 56px de altura en todas sus variantes, fondo neutral-lighter y borde neutral-base inferior de 1px de grosor.
2. Logo Gobierno de Aragón: Lo mostramos de forma expandida antes de la identificación del usuario. Cuando accede a la aplicación aparece de forma reducida, sólo con la bandera. En anchuras pequeñas y móviles siempre aparece reducido.
3. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
4. Nombre de aplicación: Separado por dos líneas divisorias. En anchuras pequeñas se omiten y únicamente se muestra la etiqueta con el nombre. Cuando es necesario cambiar entre distintas aplicaciones, colocamos un listado en caja para facilitar la navegación. En dispositivos móviles esta función se encuentra dentro del menú lateral, a través del componente detalles.
5. Menú de navegación: En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral.

Diferencias entre cabecera pequeña, cabecera avanzada y cabecera estándar #

Buenas prácticas #

Aviso

No recomendamos que la posición quede fijada (stickies) ya que reduce mucho el área de visualización.

Incorrecto

No coloques componentes ni logotipos adicionales en la cabecera. Hazlo en el pie de página o en el hero.

Incorrecto

No coloques fotografías en la banda del título de cabecera. Hazlo en el hero.