Header and Footer
Last updated: 22/05/2026
Header
Header is a top-of-page structural component of a page or section that provides introductory and navigational content, typically including the site or application name, logo, primary navigation, and sometimes search or utility actions:
- Purpose: Identifies the service and provides access to primary navigation and key utilities.
- Structure: Contains branding elements such as a logo or product name, optionally a search field and navigation links, and is placed at the top of the layout.
A header component consists of:
- Container: The outer wrapper that defines the full header region, its width, horizontal padding, vertical spacing, and alignment within the page grid.
- Branding area: The part containing the logo, wordmark, site name, or product identifier; it acts as the primary recognition element and often links to the homepage.
- Navigation area: A grouped set of primary navigation links that provides access to main sections of the website or application.
- Utility area: A secondary group of controls such as search, account actions, language switcher, theme toggle, or contextual tools.
At implementation level, the header is commonly represented by the semantic <header> element, and when it contains the main site navigation, it often also includes a nested <nav> element for primary navigation links.
Footer
Footer is a structural component positioned at the bottom of the interface. It contains secondary navigation, supporting actions, and service-level informational content such as legal, copyright, contact, or accessibility links.
In cases where all social media channels are present, please ensure they are displayed in the following mandatory order.
The list must be reordered to:
1.Mastodon | 2.LinkedIn | 3.Bluesky | 4.Facebook | 5.YouTube | 6.+(a link to the full list of EC social media presence).
Please note the color for the icons is #26324b
A footer component consists of:
- Container: The outer wrapper that defines the full header region, its width, horizontal padding, vertical spacing, and alignment within the page grid.
- Navigation area: A section for secondary or repeated navigation links, often reflecting key destinations from the main site structure.
- Utility area: A grouping for supporting links and actions such as contact details, feedback, social links, back-to-top actions, or help-related items.
- Meta / legal area: A section containing copyright notice, privacy policy, terms of use, accessibility statement, or other service-level legal and informational content.
- Branding area: A section containing the logo, organisation name, or service identifier to reinforce ownership and consistency at the bottom of the page.
At implementation level, the component is commonly represented by the semantic <footer> element, which defines a footer for the nearest sectioning root or sectioning content and typically contains information about the section, related documents, authorship, or copyright.
More information
For more information on Header and Footer template please visit
EU branded harmonised websites design (EU Login required),
EC branded standardised and harmonised websites design (EU Login required).
Info Corner
Follow us
This site is managed by
