Custom Sub Header
The custom sub header is a customizable space where the user can play with graphic elements. The allowed customizations are on the foreground graphic elements and the color/image of the background.
Overview
The Custom Sub Header is a versatile component designed to enhance the visual appeal and branding of FAO web pages. It provides a customizable space below the main header where users can incorporate unique graphic elements and adjust the background to suit their specific needs. This component allows for creative freedom while maintaining consistency with the overall FAO design system.
Key features of the Custom Sub Header include:
- Customizable foreground graphic elements
- Flexible background options (color or image)
- Responsive design for various screen sizes
- Seamless integration with the main FAO header
By utilizing the Custom Sub Header, content creators can add a unique visual identity to different sections or subsites within the FAO ecosystem, while still adhering to the organization's overall design guidelines.
Usage
Use the right and left space to place the element/elements. The requested format is SVG, in order to maintain the maximum quality. The maximum width for the elements is 320px. This is to avoid image cut on mobile version. 320px is the limit of size for the Custom Sub Header, and 100px is the height, in line with the main FAO Header on top.
Mobile limit
The Custom Sub Header has a maximum width of 320px on mobile devices. This limit ensures that the component remains visually appealing and functional across various screen sizes, particularly on smaller mobile screens. By adhering to this width restriction, we can prevent content from being cut off or distorted on mobile devices, maintaining a consistent and user-friendly experience across all platforms.
Background image
Is it possible to a place a background image. The image is set as "cover", so it will fill up the space proportionally, and it is centered.
Number of elements
Is really important to be careful on the amount of elements placed in the two sides of the Custom Sub Header. By using more than one element per side, it is very easy to force the banner to have 2 rows of element, causing an unaesthetic display on mobile phones.
Pop out class
The pop out class is a class that is used to make the element pop out. It is used to make the element stand out from the background. It is used to make the element stand out from the background. It is used to make the element stand out from the background.
No "pop-out"
"pop-out"