--- title: "Stage" description: "The Stage 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/stage.html lastModified: 2026-08-04T13:38:33.872Z --- # Stage # Hello there ! Stage is a Hero Component ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_3-19%3A2-1?fmt=webp-alpha) [How to Configure](#how-to) [Web Component (Storybook)](https://master.storybook.ui.services.eon.com/?path=/story/stage--interactive) # Stage Please check Example in Top of this Page. [How to Configure](#how-to) ### Description The Stage 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 - Headline can be H1, H2, or H3 - Video can be used as well - Also a Boxed Version is available [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/stages-stage--interactive) ### Inspirations ## Stage - Full Height & Light Design Hero Component Stage in Full Height with lighten Image and dark Indicator. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage/stage-full-height-light.html) ## Stage - Full Height & Dark Design Hero Component Stage in Full Height with darken Image and light Indicator. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage/stage-full-height-dark.html) ## Stage - Boxed Background "Red 500", no blur Hero Component Stage Content highlighted in Red 500 Box and clear Background. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage/stage-boxed-background-red.html) ## Stage - Boxed Background "White", blur Hero Component Stage Content highlighted in White Box and blurred Background. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage/stage-boxed-background-white-blur.html) ## Stage - Video Hero Component Play a Video inside the Stage [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage/stage-video.html) ### Usage Rules & Features ##### Features - Can only be added as Hero Component - Image or Video Version can be used in normal or full Height - Features Eye Catcher as Promo Type - Contains a content parsys to allow components: Bullet List, Button, Image, Links, Pictogram, Text, Free HTML, Clickable Image, Badges, Number ##### Properties - Boxed Version is available - Background can be made blurred if Boxed Version is used - One or two Buttons, or a Link and a Button can be included - The second Interaction is optional, but if seleced it will always come as primary Button ##### Design - 3 different Text Widths are available: Narrow, Normal, Wide - The Content (Headline, Subheadline, and Links) can be placed in Top, Center, or Bottom of a Stage ##### In which Grid Columns does it fit? The Stage is not placed in any Grid or Section, but in Hero Component Area in Top of Page. ##### DO's - Place Content in Top, Center, or Bottom of a Stage, depending on what fits better to the Image ##### DONT's - Do not use multiple Stages on one Page (except in a Carousel) - If H1 is used in Stage, do not use another H1 on the same Page, as it only should be used once per page, because of SEO Reasons ## 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/stage_variant%3A3-4?fmt=webp) ### Choose a Variant In Variant and Style Tab, Editor must choose a Stage Variant at first. Depending on Selection, different Configuration Options are available. Selectable Variants are: - Image - Video ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_text%3A1-1?fmt=webp) ### Maintain Content For all Stage Variants Text and Interactions can be maintained. In Text Tab, Headline and Subheadline Text can be added. For Headline the Size can be selected between H1 and H3. Furthermore, the HTML Tag for SEO can be configured. If Editor likes to add an Interaction, the Reference Type needs to be set to Button or Link in Interaction Tab, then the Dialog expands to configure Button or Link with URL and Text (as well as Rank if it is a Button). Furthermore, if "Add additional Button" is selected, a second Button can be configured. The second Button will always come with Primary Rank. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_link%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_button%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_image%3A1-1?fmt=webp) ### Add an Image All Stage Variants have 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 Ratio - Image Tablet: 2:1 Ratio - Image Mobile: 4:3 Ratio * For Stage with Video (Full Height) these Images are used as Fallback if Video is not loading. [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/stage_eyecatcher%3A1-1?fmt=webp) ### Add EyeCatcher If Eye Catcher is selected as Promo Tab in Variant and Style Tab, for all Variants an Eye Catcher Alignment (left, right) can be choosen and an additional Eye Catcher Tab appears. In Eye Catcher Tab, Editor can maintain Eye Catcher as usually. [Read more about Eye Catcher Configuration](https://www.eonshowroom.eon.com/en/specials/eye-catcher.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_parsys?fmt=webp) ### Content Options Editors can add the following **Components** directly: - Badges - Number - Bullet List - Button - Clickable Image - Links - Divider - Quote - Free HTML - Image - Pictogram - Text This Feature allows Editors to combine multiple Components within a single Stage Area and makes the Content more dynamic and engaging across different Layouts or Campaigns. ### Configuration of Variant Image ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_style-image%3A3-4?fmt=webp) ### Choose a Style In Variant and Style Tab, Editor has several Options to style Stage with Image (Full Height): - Stage Height Stage Height can be fixed, auto or full Height. - Headline without Background (may affect Readabiltiy) If unselected, Content will be placed in a colored Box. Therefore, Box Color (Neutral 100, Red 500) can be choosen. - Headline Type Headline Type can be either the Brand Headline or the Standard one. - Content Position Content Position can either be Top or Bottom. By default it is Bottom aligned. - Text Width Text Width can either be Wide, Normal, or Narrow. By default it has Normal Width. - Image Appereance Select if the Image is a Dark Image or a Bright one. Depending on this Selection, Font Color is set automatically. - Adjust Image for better Readability For better Readability of the Text, the Image can be darkened or lightened. By Default, Image will be darkened. - Promo Type Choose a Promo Type if wanted. Read more about it above. - Eye Catcher Alignment If Promo Type is Eye Catcher, right or left Alignment is choosable. ### Configuration of Variant Video ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage_style_video%3A1-1?fmt=webp) ### Choose a Style In Variant and Style Tab, Editor has several Options to style Stage with Video: - Stage Height Stage Height can be fixed, auto or full Height. - Headline without Background (may affect Readabiltiy) If unselected, Content will be placed in a colored Box. Therefore, Box Color (Neutral 100, Red 500) can be choosen. - Headline Type Headline Type can be either the Brand Headline or the Standard one. - Content Position Content Position can either be Top or Bottom. By default it is Bottom aligned. - Text Width Text Width can either be Wide, Normal, or Narrow. By default it has Normal Width. - Image Appereance Select if the Image is a Dark Image or a Bright one. Depending on this Selection, Font Color is set automatically. - Adjust Image for better Readability For better Readability of the Text, the Image can be darkened or lightened. By Default, Image will be darkened. - Promo Type Choose a Promo Type if wanted. Read more about it above. - Eye Catcher Alignment If Promo Type is Eye Catcher, right or left Alignment is choosable. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/stage__video%3A16-9?fmt=webp) ### Add a Video A Video can be added via the unified Video Dialog supporting Vimeo, Moving Images or DAM Videos. Configure Video ID/URL and Play/Pause can be displayed in light or dark color. Existing videos remain functional.Editor can add a Video in same Way as for Video Component.Note: E.ON Vimeo Videos may disappear during the testing Phase.