Headers
Explore versatile header options for effective website organization
Overview
Headers are essential components in web design, providing structure and navigation for websites and applications.
This page showcases different types of headers available in the Fao Design System, including subsite headers, share headers, and application headers with various configurations.
Each header type serves a specific purpose and can be customized to fit the needs of your project.
The headers are responsive and can be used in different contexts, such as on desktop, tablet, and mobile devices.
Subsite
The subsite header is specifically designed for FAO.org subdomains, providing a consistent and recognizable navigation structure across all FAO-affiliated websites.
This header incorporates essential elements such as the FAO logo, language selection, and quick access to key resources, ensuring a unified user experience throughout the FAO.org ecosystem.
Its responsive design adapts seamlessly to various screen sizes, maintaining functionality and brand identity across desktop and mobile devices.
Share
The share header is a versatile component designed to facilitate content sharing and quick actions.
Typically positioned below the main site header, it provides users with convenient options to share, print, or interact with the current page.
This header enhances user engagement by making it easy to distribute content across various platforms or perform common tasks without navigating away from the page.
Application
The application header is designed specifically for dashboards and web applications. It provides a clean, modern interface that prioritizes functionality and ease of navigation.
This header type typically includes essential elements such as a logo, main navigation menu, and optional features like search functionality and user account access.
DESIGN SYSTEM
Application with search
DESIGN SYSTEM
Application with login
DESIGN SYSTEM