Hero - Simple

**
View a live demo of this section here.**

The following is a detailed listing of the styling edits made to the section, the modules used in the section, and field changes from the modules’ default state.

Section Styles

Alignment and spacing > Max width

theme.global.max_width_narrow

Background > Color

theme.global.colors.backgrounds.medioum_dark.color

Background > Image

Position: MIDDLE_CENTER
Size: Cover
URL: placeholder

Modules

Text Block

Visible Elements

Heading, Subheading

Semantic Heading Level

1

Style Heading Level

1

Styles > Dark Mode

true

Styles > Alignment

Desktop: Center

---

When to Use the Hero Simple Section

The Hero Simple section is designed as a clean, impactful introduction to your pages, making it particularly effective for educational institution homepages, event landing pages, and course overview pages. Unlike more complex hero layouts in the Rubric theme, this section focuses attention on your primary message without competing visual elements.

You’ll find this section most valuable when you need to communicate a single, powerful message — whether that’s announcing a new academic program, promoting an upcoming conference, or introducing visitors to your organization’s mission. The centered alignment and large heading create immediate visual hierarchy, while the background image capability lets you reinforce your message with relevant imagery.

Setting up your background effectively is crucial for this section’s impact. When uploading your background image through the page editor, choose high-resolution images (at least 1920px wide) that maintain visual clarity when text is overlaid. The theme’s built-in dark mode styling automatically adjusts text contrast, but you should still test readability across different background images.

Consider your content hierarchy when editing the text block module. The semantic heading level is set to H1 by default, making this section ideal for page headers where you want proper SEO structure. If you’re using this section lower on a page, you can adjust the semantic level in the module settings while maintaining the visual H1 styling.

This section works particularly well on landing pages where you want visitors to focus on a call-to-action, program overview pages in educational sites, or event pages where the hero image can showcase the venue or activity. The narrow max-width setting ensures your content remains readable on large screens while the responsive design adapts seamlessly to mobile devices.