---
title: "Hero Section"
description: "The Hero Section Component can be used to create an illustrative Introduction as Hero Component on a Page."
path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/hero-section.html
lastModified: 2025-04-15T13:16:23.488Z
---

# Hero Section

## Hello there

## Hero Section is a Hero Component

[How to Configure](#how-to)

# Hero Section

Please check Example in Top of this Page.

[How to Configure](#how-to)

### Description

The Hero Section Component can be used to create an illustrative Introduction as Hero Component on a Page.

- Used on Top of Home- and Landing-Pages only
- Is not placed in Grid or Section, but in Hero Component Area in Top of Page
- Color or Image Background possible

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/stages-hero-section--interactive)

### Inspirations

## Hero Section is a Hero Component

## But usable in Content Area

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_3-19%3A16-9?fmt=webp-alpha)

[Back to Description](https://www.eonshowroom.eon.com/en/teasers-and-highlights/hero-section/hero-section-image.html)

### Usage Rules & Features

##### Features

- Can only be added as Hero Component
- Color or Image Background possible

##### Properties

- Different Headline & Subheadline Arrangements are available

##### Design

- For the Content (Headline, Subheadline, and Links) different vertical and horizontal Alignments are choosable

##### In which Grid Columns does it fit?

The Hero Section is either placed in Hero Component Area in Top of Page, or in a 12 Column Grid with the Parent Section set to "Span full Width" and "Remove Grid Margins" for proper Display.

##### DO's

- Place Content in Alignment that fits best

##### DONT's

- Do not use multiple Hero Sections on one Page
- If H1 is used in as HTML Tag for SEO, do not use another H1 on the same Page, as it only should be used once per page, because of SEO Reasons
- Limit the Number of Characters to approximately 60. In Combination with Subheadline and/or Button even less is recommended.

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_style_type-color%3A3-4?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_style_type-img%3A3-4?fmt=webp)

### Style the Hero Section

In Style Tab, Editor must choose a Background Type at first. Depending on Selection, Editor either choose a Background Color between Red500 and Red500 with Gradient, or a Color of Text Background for Mobile Viewports. Available Colors of Text Background for Mobile Viewports are White, Grey100, Red500 and Red500 with Gradient.

Furthermore Editor can choose if Headline or Subheadline should come first.

Beside that horizontal (left, center) and vertical (top, centered, bottom) Alignment of the Content can be choosen.

![Add an Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_img-crop%3A3-4?fmt=webp)

### Add an Image

The Background Type Image has three Image Tabs. In these Tabs, Editor can add Images and adjust them in same Way as for normal Image Component. Please ensure to provide Desktop, Tablet, and Mobile Image, as they are using different Ratios:

- Image Desktop: 2:1 or 16:9 Ratio
- Image Tablet: 16:9 Ratio
- Image Mobile: 4:3 Ratio

[Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html)

[Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html)

[Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_text%3A3-4?fmt=webp)

### Maintain Content

In Text Tab, Headline and Subheadline Text can be added. For Headline the HTML Tag for SEO can be configured.

Furthermore, Hyphenation can be activated for a choosen Language.

![Have no CTA](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_links-nocta%3A2-1?fmt=webp)

### Add Interaction

In Links Tab, Editor can choose to add a Button, a Link (default), or to have no Interaction. Depending on the Selection, Editor needs to provide necessary Information.

For more Details see:

[Links](https://www.eonshowroom.eon.com/en/content-elements/link.html)

[Buttons](https://www.eonshowroom.eon.com/en/content-elements/button.html)

![Add a Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_links-link%3A3-4?fmt=webp)

![Add a Button](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-section_links-btn%3A3-4?fmt=webp)