Header

Modules

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

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).

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).

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.

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.

Content portal with all configuration options enabled

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.

Service portal with all configuration options enabled

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.

Electronic headquarters with all configuration options activated

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.

Example of an management-oriented content portal

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.

Service portal with all configuration options enabled

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.

Example logos on tablet

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

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.

Example logos on tablet

Example of logos in mobile

Responsive

Desktop

Tablet

Mobile