Hero

Overview #

The Hero section is designed to serve as a prominent visual element at the top of a page, similar to a banner but composed of customizable blocks. It is typically used to highlight key information or imagery, setting the tone for the rest of the page content.

Key components and functionality #

Imagery settings

Imagery settings allow you to control the placement and appearance of images within the Hero section. This includes options for featured image placement and the ability to select different images for desktop and mobile views.

• Featured image placement: Choose where the featured image appears. Options include background, left, right, or no image. The default is right.
• Featured image: Select an image to be displayed prominently.
• Featured image - Mobile: Choose a different image for mobile devices to ensure optimal display.

Video settings

Video settings enable the inclusion of video content within the Hero section, enhancing the visual appeal and engagement.

• Featured video: Add a video to the section. This can be a hosted video or a link from platforms like YouTube or Vimeo.

Padding settings

Padding settings control the space around the content within the Hero section, allowing for adjustments to the top and bottom padding on both desktop and mobile devices.

• Top padding - Desktop: Adjust the top padding for desktop views, ranging from 0 to 120 pixels, with a default of 32 pixels.
• Bottom padding - Desktop: Adjust the bottom padding for desktop views, ranging from 0 to 120 pixels, with a default of 32 pixels.
• Top padding - Mobile: Adjust the top padding for mobile views, ranging from 0 to 120 pixels, with a default of 16 pixels.
• Bottom padding - Mobile: Adjust the bottom padding for mobile views, ranging from 0 to 120 pixels, with a default of 16 pixels.

Supported block types

The Hero section supports various block types, allowing for a flexible and customizable layout. These include:

1. Breadcrumbs: Provides a hierarchical list of links for navigation.
2. Button: Adds customizable buttons for calls to action.
3. Heading basic: Displays headings with various styling options.
4. Icon with text: Highlights key features or selling points with icons and text.
5. Image: Displays images with customizable styles and sizes.
6. Rich text basic: Allows for the inclusion of formatted text content.

Usage notes #

• Responsive design: Ensure that images and videos are optimized for both desktop and mobile devices to maintain visual consistency and performance.
• Performance: Use appropriately sized images and videos to minimize loading times and enhance user experience.
• Accessibility: Ensure that text and background colors meet accessibility guidelines for readability.

Usage examples #

1. Creating a visual impact: Use the Hero section to display a high-quality image or video that captures the essence of your brand or product. Adjust the imagery settings to ensure the content is positioned optimally for both desktop and mobile views.

2. Highlighting key messages: Combine the Heading basic and Rich text basic blocks to convey important messages or promotions. Use the Button block to direct users to specific pages or actions.

3. Enhancing navigation: Incorporate the Breadcrumbs block to improve user navigation, especially on pages with complex hierarchies or multiple levels of content.