Hero - Basic

Overview #

The Hero - Basic section is designed to prominently display the page title and key information at the top of a page. It can also showcase a featured image if available, making it ideal for creating an impactful introduction to your content.

Key components and functionality #

Featured image placement

This setting allows you to choose how the featured image is displayed within the section. Options include:

1. Background: The image is used as a background.
2. Left: The image is placed on the left side.
3. Right: The image is placed on the right side.
4. No image: No image is displayed.

Default: Right

Text alignment

This setting controls the alignment of text within the section. You can choose from various alignment options to best fit your design needs.

Show author

Enable this option to display the author's name on the page. This can be useful for blog posts or articles where author attribution is important.

Default: Enabled

Show breadcrumbs

Breadcrumbs provide a navigational aid, showing the path to the current page. This setting allows you to display breadcrumbs for better user navigation.

Default: Enabled

Show date

This setting allows you to display the publication date of the content, which can be useful for time-sensitive information.

Default: Enabled

Show excerpt

Enable this option to display a brief excerpt of the content. This can provide a quick overview for readers.

Default: Disabled

Show print button

This setting adds a print button to the section, allowing users to easily print the page content.

Default: Disabled

Show share button

Enable this option to display a share button, facilitating easy sharing of the content on social media or other platforms.

Default: Enabled

Show tags

This setting allows you to display tags associated with the content, which can help in categorizing and finding related content.

Default: Enabled

Usage notes #

• Responsive Design: Ensure that the section's layout is tested across different devices to maintain a consistent and accessible user experience.
• Performance: Optimize images used in the section to reduce load times and improve page performance.
• Accessibility: Ensure that text and background colors meet accessibility standards for readability.

Usage examples #

1. Blog Post Introduction: Use the Hero - Basic section at the top of a blog post to display the title, author, and publication date, along with a featured image on the right. This setup provides readers with a clear and engaging introduction to the post.

2. Product Announcement: For a product announcement page, use the section to highlight the product name and key features, with the image set as a background. This creates a visually appealing and informative header for the page.