A Hero Panel is a common design feature located at the top of a page and acts to support the primary purpose of the page, which could be; to invite a user to further explore the content, to prompt a user to perform an action (when including a button) or simply to support the content of a page. The Hero Panel component works as a system offering three variations; Full Screen, Fixed Height, and Auto Scaling. These variations are designed to provide maximum flexibility across a range of contexts and experiences and are available in the basic hero panel and enhanced hero panel modules.
Full Screen Hero
Enable the Full Screen option in the hero panel module to force the height of the panel to always fill the users screen with the rest of the page elements falling beneath the fold of the screen. The main image becomes a background image set to "cover".
Fixed Height Hero
Enter a specific value in pixels to set the height of the hero panel on all browsers. Hero panel fixed heights typically start at 400 px height. 100 to 300 px is a short title bar style hero. 400 to 600 px is average. 800 to 1,000 px is closer to full screen. The main image becomes a background image set to "cover". This means that depending on the height setting, the lower portion of the image is automatically cropped.
Auto Scaling
The basic hero panel module background image is set to "contain" so that the image height changes with the width of the screen so that none of the image is cropped. This format treats the main image as a banner. The advantage of this approach is that all of the image will display as you reduce (scrub) the browser window.
Basic and Enhanced Hero Panel Modules
Logic CMX provides two different hero panel modules: the Basic Hero Panel Module and the Enhanced Hero Panel Module. Both share similar features with the Enhanced Hero Panel offering significantly more controls and options for more advanced applications.
Basic Hero Panel
The basic hero allows the user to add a single, fixed panel or multiple panels to form a slide show that can automatically advance or display arrows to allow the user to scroll through the panels. The background image of a basic hero panel acts as a large banner that scales according to the browser width without losing any of the image. As browser gets wider, the image scales taller.
Enhanced Hero Panel Module
The enhanced hero allows the user to add a single, fixed panel or multiple panels to form a slide show that can automatically advance or display arrows to allow the user to scroll through the panels. The background image of the enhanced hero panel is set to "cover" so that image automatically fills the designated height of the panel. As browser gets wider or smaller, the image is cropped accordingly to fill the space. This is a good option for images that are intended as backgrounds and to not have text or important elements that may get cut-off.
Parts of a Hero Panel
The main parts of a hero panel are as follows:
Background Image
This is the image that fills the entire background of the hero panel space. If an image is not selected, a background image or gradient can be selected using the color picker tool. Background images have two formats. Desktop Image which should be a landscape image (typically 1,000 to 2,000 pixels wide) with the height as the short dimension (400 to 800 pixels tall) and a Mobile Image with a portrait format (typically 600 to 800 pixels wide with the height as the long dimension between 1200 to 2,000 pixels tall. Both can have a Panel URL added that links to a designated page when the user clicks on the panel.
Overlay Elements
Overlay elements are added to the foreground and "float" over the background image in a designated layout (centered, left aligned, and right aligned). Overlay elements include a foreground image or logo, text (title and description with links and formatting), and one or more buttons added from the CTA section.
Call to Action
The CTA section is where one ore more buttons can be configured and linked to internal or external web pages.