Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Modules Cabecera

Header

Headers are containers attached to the top of a page that contain actions and navigation of the entire product, as well as user preferences and branding that allow the user to know where they are.

Preview

Figma
header preview

Componentes principales

Horizontal menu

Links

Tipo de usuario

Administración

Se utilizará en los portales destinados a la propia administración.

Construction of logos. It must include the "Common Services" logo. Horizontal menu: When the header includes a horizontal menu, it must be the negative version (white background).
Display of header behavior with usurarium administration
Management-oriented header

Ciudadanos

Se utilizará en los portales destinados a la propia administración.

Construction of logos. It must include the "Common Services" logo. Horizontal menu: When the header includes a horizontal menu, it should be the positive version (blue background).
Display the behavior of the header with the usurary citizens
Citizen-oriented header

Tipología de la página

Portal de contenidos

Los portales de contenido son páginas que alojan contenidos que no comprenden ni servicios ni sedes. Agrupan gran cantidad de información, servicios y/o recursos relacionados con una organización o un mismo tema.

En este tipo de página podrán configurarse los siguientes elementos dentro de la cabecera:

Search Engine: It may or may not appear. Search Engine: It may or may not appear. External link: It can be shown or not. It is usually used in cases where the page has a login that redirects to an external page. Horizontal menu: It may or may not appear. Linguistic configuration: Obligatory.
Display the header behavior in the content portal with all configuration options enabled
Content portal with all configuration options enabled
Display the header behavior in the content portal with all configuration options disabled
Content portal with all configuration options disabled

Servicios

Las páginas de tipo servicio electrónico son páginas desde las que los usuarios pueden realizar diferentes consultas, solicitudes, inscripciones, etc. de manera electrónica.

Para este tipo de páginas podrán configurarse los siguientes elementos dentro de la cabecera:

Help: It may or may not appear. Secondary Action Button: It may or may not appear Language settings: It may or may not appear Role of the user: When the user is logged in, their name and surname are displayed. Optionally, its role may or may not be displayed. Horizontal menu: It may or may not appear.
Display the header behavior in the service portal with all configuration options enabled
Service portal with all configuration options enabled
Display the header behavior in the service portal with all configuration options disabled
Service portal with all configuration options disabled

Sedes Electrónicas

En las sedes electrónicas, el ciudadano puede encontrar todos los trámites electrónicos disponibles de la AGE, así como acceso a su Área Privada.

Para este tipo de páginas podrán configurarse los siguientes elementos dentro de la cabecera:

Search Engine: They may or may not appear. Help: They may or may not appear. Time and date of the connection: They may or may not appear. Role of the user: When the user is logged in, their name and surname are displayed. Optionally, its role may or may not be displayed. Horizontal menu: It may or may not appear. Linguistic configuration: Obligatory.
Visualization of header behavior in electronic headquarters with all configuration options enabled
Electronic headquarters with all configuration options activated
Display of header behavior in electronic headquarters with all configuration options disabled
Electronic headquarters with all configuration options disabled

Construcción de logotipos

Todas las páginas de la administración incluirán de forma obligatoria el logotipo de Gobierno de España. Este logotipo tendrá una altura de 64px e irá a sangre dentro de su contenedor.

Adicionalmente existen una serie de combinaciones posibles de logotipos secundarios en función del tipo de página y servicio. Estos logotipos tendrán una altura máxima de 36px y su ancho será flexible.

Portal de contenido y Servicios

Este tipo de páginas incluirán en su cabecera como mínimo el logotipo de organismo así como el logotipo de servicio o su nombre en caso de no existir logotipo de servicio.

Logo of the Government of Spain: Obligatory Logo of the Agency: Obligatory Logo or Service Name: Obligatory. When there is no service logo, the name of the service will be included.
Display of header logo behavior in the content portal
Example of an management-oriented content portal
Visualization of the behavior of header logos in the portal rientado to citizens
Example of a citizen-oriented content portal

Servicios

Las páginas de tipo servicio electrónico son páginas desde las que los usuarios pueden realizar diferentes consultas, solicitudes, inscripciones, etc. de manera electrónica.

Para este tipo de páginas podrán configurarse los siguientes elementos dentro de la cabecera:

Help: It may or may not appear. Secondary Action Button: It may or may not appear Language settings: It may or may not appear Role of the user: When the user is logged in, their name and surname are displayed. Optionally, its role may or may not be displayed. Horizontal menu: It may or may not appear.
activated
Service portal with all configuration options enabled
Display the header behavior in the service portal with all configuration options disabled
Service portal with all configuration options disabled

Responsive

La construcción de logotipos varía en las resoluciones XS y SM.

Logo of the Government of Spain: Obligatory. It will have a height of 40px and will be in full bleeding inside your container. Logo of the organization: Required on SM (tablet) On XS (mobile) It will appear in the footer. Logo or Service Name: Obligatory. They will have a maximum height of 21px and their width will be flexible. When there is no logo of the service, the name of the service will be included.
Display of header logo behavior in tablet size
Example logos on tablet
Display of header logo behavior in mobile size
Example of logos in mobile

Sedes Electrónicas

Este tipo de páginas incluirán en su cabecera como mínimo el logotipo del ministerio correspondiente así como el logotipo de servicio o su nombre en caso de no existir logotipo de servicio, y adicionalmente podrán incluir además del logo de servicio, su nombre

Logo of the Government of Spain: Obligatory Logo of the Ministry: Obligatory Logo or name of service/organization: Optional. If there is no logo of the service, your name will be included. Name of the venue: Obligatory
Display of header logo behavior in electronic venues
Example logos in electronic venues

Responsive

La construcción de logotipos varía en las resoluciones XS y SM.

Logo of the Government of Spain: Obligatory Logo of the Ministry: In SM resolution it will be mandatory. In XS it will not appear. Logo or name of service/organization: Optional. If there is no logo of the service, your name will be included. Logo or name of service/organization: Optional in SM resolution, when there is no logo of the service, your name will be included. For resolution XS will not appear. Name of the venue: Obligatory.
Display the behavior of header logos on the tablet size
Example logos on tablet
Display the behavior of header logos on the tablet size
Example of logos in mobile

Responsive

Display of header behavior on desktop size screens
Desktop
Display of header behavior on tablet size screens
Tablet
Display of header behavior on mobile-sized screens
Mobile
NextGenerationEU European Union Funding Logo Transformation and Resiuliency Recovery Plan Logo Spain digital logo Support Accesibility Sitemap Privacy Policy Cookie Policy

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.