--- title: "Content Header Brand Evolution" description: "The Content Header Component can be used to create an emphasized Introduction as Hero Component on a Page." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header.html lastModified: 2025-10-15T14:53:08.156Z --- # Content Header Brand Evolution ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bulbs_lights_in_front_of_wall%3A2-1?fmt=webp) ## Turn the Lights ON ! The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/logo/Paypal.svg) [How to Configure](#how-to) # Content Header Brand Evolution Please check Example in Top of this Page. [How to Configure](#how-to) ### Description The Content Header Component can be used to create an emphasized 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 - Different Versions are possible - Does have Parsys for additional Content [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/stages-page-header--interactive) ### Inspirations ## Content + Image above Hero Component Check out Content Header Component as Variant "Content + image above". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-vertical-layout.html) ## Content on Image Hero Component Check out Content Header Component as Variant "Content on Image". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-content-on-image.html) ## Content only Hero Component Check out Content Header Component as Variant "Content only". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-content-only.html) ## Content + Image on the Right with Video Hero Component Check out Content Header Component as Variant "Content + image on the right" with Video. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-video.html) ## Content on Image with Full Height Hero Component Check out Content Header Component as Variant "Content on Image" with Full Height. [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-content-on-image-full-height.html) ## Content on Image + Offset Video Hero Component Check out Content Header Component as Variant "Content on Image + Offset Video". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-content-on-image-with-offset.html) ## Content only + Offset Image Hero Component Check out Content Header Component as Variant "Content only + Offset Image". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-content-only-with-offset.html) ## Content on Image + Offset Image Hero Component Check out Content Header Component as Variant "Content on Image + Offset Image". [Have a look?](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header/content-header-offset-clickable-image.html) ### Usage Rules & Features ##### Features - Can only be added as Hero Component - Six different Variants: Image right, Image above, Content on Image, or Content only, Content on Image + Offset Image, or Content only + Offset Image - Image can be replaced by a Video - Features Eye Catcher as Promo Type ##### Properties - Additional Parsys to add further Content - Buttons, or a Link can be included - Text can be in Copy or Abstract Style ##### Design - A Lot of Color Options are available ##### In which Grid Columns does it fit? The Content Header is not placed in any Grid or Section, but in Hero Component Area in Top of Page. ##### DO's - Choose Variant fitting to your Purpose - In Offset Image Parsys of Offset Variants decide for only on Component: Either Image or Clickable Image ##### DONT's - Do not use multiple Content Header on one Page - If H1 is used in Content Header, do not use another H1 on the same Page, as it only should be used once per page, because of SEO Reasons - Do not use Image or Clickable Image Component in Content Parsys, as they should only be used in Offset Image Parsys on right ## 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) ![Decide for a Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_choose-variant%3A1-1?fmt=webp) ### Choose a Variant In Variant Tab, Editor must choose a Content Header Variant at first. Depending on Selection, different Configuration Options are available. Selectable Variants are: - Content + Image on the Right - Content + Image above - Content on Image - Content only - Content on Image + Offset Image - Content only + Offset Image - Content on Image + Offset Video - Content only + Offset Video ![Add an Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_image%3A3-4?fmt=webp) ### Add an Image All Content Header Variants (except Content only Variant) 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: 4:3 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) ![Add some Content](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_content%3A3-4?fmt=webp) ### Maintain Content For all Content Header Variants Content Tab can be maintained. In Content Tab, Headline, Subheadline, and Text can be added. For Headline the Size can be selected between H1 and H5. Furthermore, the HTML Tag for SEO can be configured. Only for "Content on Image" Variant, Size is not selectable from UI-Kit 4.8.0 on and higher, as there automatically Brand Headline is used. Beside that, for Suheadline the Size can be selected between H4 and H6. Beside that, Abstract Text Size can be choosen to be Copy or Abstract. Moreover, selecting Enable Info Icon Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![Configure no CTA](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_cta-none%3A4-3?fmt=webp) ### Configure a Button or Link If Editor likes to add an Interaction, the CTA 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. [Read More about configuring a Link](https://www.eonshowroom.eon.com/en/content-elements/link.html) [Read More about configuring a Button](https://www.eonshowroom.eon.com/en/content-elements/button.html) ![Configure a CTA as Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_cta-link%3A1-1?fmt=webp) ![Configure a CTA as Button](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_cta-button%3A1-1?fmt=webp) ![Maintain EyeCatcher](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_eyecatcher%3A3-4?fmt=webp) ### Add Highlight Type Eye Catcher If Eye Catcher is selected as Highlight in Variant Tab*, for all Variants an Eye Catcher Position (Top left, Top right, Bottom left, or Bottom right) can be choosen and an additional Eye Catcher Tab appears. In Eye Catcher Tab, Editor can maintain Eye Catcher as usually. *Hint: Content only Variant does not support any highlighting Option. [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/content-header_spotlight%3A1-1?fmt=webp) ### Add Highlight Type Spotlight Image If Spotlight Image is selected as Highlight in Variant Tab*, for all Variants an Spotlight Image Position (Top left, Top right, Bottom left, or Bottom right) can be choosen and an additional Spotlight Image Tab appears. In Spotlight Image Tab, Editor can add an Image Path for the Spotlight Image. Furthermore, the Image Width can be defined, whereas the Default is 150px, if nothing is configured, and the Maximum Size is 250px. Beside that Image Accessibility Options (Decorative Image or Title & Alt-Text) are available. *Hint: Content only Variant does not support any highlighting Option. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_video%3A16-9?fmt=webp) ### Add Video If Checkbox for Video is selected in Variant Tab*, an Option to darken the Video for better Readability gets visible in Variant Tab, as well as an additional Video Tab appears. 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. [Read more about Video Configuration](https://www.eonshowroom.eon.com/en/content-elements/video-player.html) ![Add Offset-Video](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_offset-video%3A4-3?fmt=webp) Furthermore, for the Variants "Content on Image + Offset Video" and "Content only + Offset Video", instead of a Background Video, an Offset Video can be maintained. In Offset Video Tab, Editor can maintain Video as usually. [Read more about Video Configuration](https://www.eonshowroom.eon.com/en/content-elements/video-player.html) ### Add additional Content ##### Keep in Mind: The Variants "Content on Image + Offset Image" and "Content only + Offset Image" are the Variants with Offset Image. These Variants have two Parsys. Content Parsys on left and Offset Image Parsys on right. The Image and Clickable Image should only be used in Offset Image Parsys on right. But Offset Image Parsys should exactly contain only one Component. All Content Header Variants (except Content on Image Variant) have Content Parsys to contain additional Content and the Offset Variants additional have Offset Image Parsys. In Content Parsys following Components are addable: - [Badges](/content/foundationNG/en/content-elements/badges.html) - [Bullet List](/content/foundationNG/en/content-elements/bullet-list.html) - [Button](/content/foundationNG/en/content-elements/button.html) - [Eye Catcher XL](/content/foundationNG/en/specials/eye-catcher.html) - [Free HTML](/content/foundationNG/en/specials/free-html.html) - [Headline](/content/foundationNG/en/content-elements/headline.html) - [Links](/content/foundationNG/en/content-elements/link.html) - [Pictogram](/content/foundationNG/en/content-elements/picotgrams.html) - Spacer - [Text](/content/foundationNG/en/content-elements/text.html) In Offset Image Parsys following Components are addable: - [Image](/content/foundationNG/en/content-elements/image.html) - [Clickable Image](/content/foundationNG/en/content-elements/clickable-image-brand-evolution.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_parsys%3A2-1?fmt=webp) digit 1 light Content Parsys ##### Content Parsys Add here only following Components: - Badges - Bullet List - Button - Eye Catcher XL - Free HTML - Headline - Links - Pictogram - Spacer - Text digit 2 light Offset Image Parsys ##### Offset Image Parsys Add here only one of following Components: - Clickable Image - Image ###### Be Aware: Offset Video is not added via Offset Image Parsys, but via Offset Video Tab of "Content Header | Brand Evolution" Editor Dialog. ### Configuration of "Content + Image on the Right" Variant ![Variant Tab for Content + Image on the Right Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_variant-horizontal%3A4-3?fmt=webp) ### Choose a Style In Variant Tab, Editor has several Options to style Content Header with "Content + Image on the Right": - Add Video Choose to add a Video, if wanted. Read more about it above. - Background Color for Content Area Choose a Color as Background for the Content. - Add Highlight Choose a Highlight Type if wanted. Read more about it above. ### Configuration of "Content + Image above" Variant ![Variant Tab for Content + Image above Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_variant-vertical%3A1-1?fmt=webp) ### Choose a Style In Variant Tab, Editor has several Options to style Content Header with "Content + Image above": - Add Video Choose to add a Video, if wanted. Read more about it above. - Content Alignment Choose an Alignment (left or center) for the Content. - Background Color for Content Area Choose a Color as Background for the Content. - Add Highlight Choose a Highlight Type if wanted. Read more about it above. ### Configuration of "Content on Image", "Content on Image + Offset Image" and "Content on Image + Offset Video" Variant ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_variant-on-img%3A1-1?fmt=webp) ### Choose a Style In Variant Tab, Editor has several Options to style Content Header with "Content on Image": - Add Video Choose to add a Video, if wanted. Read more about it above. - Full Height It is possible to activate that Content Header is coming in Full Height. - Content Alignment By Default, Content is left aligned for E.ON Style, but center Alignment can also be choosen. - Add Highlight Choose a Highlight Type if wanted. Read more about it above. (Highlight Type is not available for Offset Variants) - Image Appereance Choose if the Image is a Dark Image, which results in White Font for the Content Header, or a Bright Image, which results in red500 Headline and grey900 Text. - Adjust Image for better Readabiity For better Readability of the Text, the Image can be darkened or lightened. By Default, Image will be darkened. ### Configuration of "Content only", "Content only + Offset Image", and "Content only + Offset Video" Variant ![Variant Tab for Content only Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-header_variant-only%3A1-1?fmt=webp) ### Choose a Style In Variant Tab, Editor has several Options to style Content Header with Content only: - Content Alignment Choose an Alignment (left or center) for the Content. - Background Color for Content Area Choose a Color as Background for the Content.