Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

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

Main components

Horizontal menu

Links

Type of user

Administration

It will be used in the portals intended for the administration itself.

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

Citizens

It will be used in the portals intended for the administration itself.

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

Typology of the page

Content Portal

Content portals are pages that host content that does not comprise either services or headquarters. They group a lot of information, services and/or resources related to an organization or the same topic.

In this type of page you can configure the following elements within the header:

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

Services

Electronic service pages are pages from which users can make different queries, requests, registrations, etc. in an electronic way.

For this type of pages, the following elements can be configured within the header:

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

Electronic Offices

In the electronic offices, the citizen can find all the available electronic procedures of the AGE, as well as access to his Private Area.

For this type of pages, the following elements can be configured within the header:

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

Construction of logos

All pages of the administration will include in a mandatory way the logo of Government of Spain. This logo will have a height of 64px and will go to blood inside your container.

Additionally, there are a number of possible combinations of secondary logos depending on the type of page and service. These logos will have a maximum height of 36px and their width will be flexible.

Content Portal and Services

These types of pages will include in their header at least the organism logo as well as the service logo or its name in case there is no service logo.

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

Services

Electronic service pages are pages from which users can make different queries, requests, registrations, etc. in an electronic way.

For this type of pages, the following elements can be configured within the header:

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

The construction of logos varies in XS and SM resolutions.

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

Electronic Offices

This type of pages will include in its header at least the logo of the corresponding ministry as well as the service logo or its name in case there is no service logo, and may additionally include in addition to the service logo, its name

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

The construction of logos varies in XS and SM resolutions.

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