--- title: "Multi Content Stage" description: "The Multi Content Stage Component (short: MCS) can be used to display multiple Topics as another Kind of Carousel. It should emphasize the Topics and is mainly used as Hero Component." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage.html lastModified: 2025-03-14T11:59:11.189Z --- # Multi Content Stage ## Solar Energy Let the Sun shine ##### Let the Sun shine - Use it's Power Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. ## Wind Energy Ride on the Wind ![test](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/wind_energy_green_fields%3A1-1?fmt=webp) ### The wind, the wind, the heavenly child Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. ## E-Mobility Drive by Power Get Power for your Car ## We are driving you Wallbox wanted ? Get to know us. [More Information](https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage.html) ## Shape the Future What is coming soon? ### Coming soon: Can you imagine? - Do Magic - Fly to Planet with Aliens # Multi Content Stage Please check Example in Top of this Page. [How to Configure](#how-to) ### Description The Multi Content Stage Component *(short: MCS)* can be used to display multiple Topics as another Kind of Carousel. It should emphasize the Topics and is mainly used as Hero Component. - Can have multiple MCS Items - Individual Content is possible - Can have a Promo Flag on any Item - Can be added as Hero Component or in Grid Control (12 Column Grid) [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/stages-multi-content-stage--interactive) ### Inspirations ## Electricity Lorem Ipsum Dolor E-Power Is Growing ### I'm baby celiac twee palo narwhal freegan celiac I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. Next level cloud bread shaman ugh, polaroid messenger bag lyft pug bespoke ea. Esse duis cronut godard 8-bit ut velit nisi. Coloring book ut scenester ipsum irony elit activated charcoal. Ramps narwhal freegan celiac ea ex nisi. [find out more](tel:0205615612) ![e-power-station](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-12%3A4-3?fmt=webp) ## Gas Esse 8-bit raclette taxidermy ### I'm baby celiac twee palo narwhal I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. Next level cloud bread shaman ugh, polaroid messenger bag lyft pug bespoke ea. Esse duis cronut godard 8-bit ut velit nisi. Coloring book ut scenester ipsum irony elit activated charcoal. Ramps narwhal freegan celiac ea ex nisi. [find out more](tel:0205615612) ![gas](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-11%3A4-3?fmt=webp) ## E.ON Plus Photo booth tattooed lyft proident Energy for your business ## I'm baby celiac Ramps narwhal freegan celiac ea I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. [Find out more](tel:06515051512) ![eon-plus](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-13%3A4-3?fmt=webp) ## E-Mobility I'm baby celiac twee palo ### I'm baby celiac twee palo narwhal freegan celiac I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. Next level cloud bread shaman ugh, polaroid messenger bag lyft pug bespoke ea. Esse duis cronut godard 8-bit ut velit nisi. Coloring book ut scenester ipsum irony elit activated charcoal. Ramps narwhal freegan celiac ea ex nisi. ![dummy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-13%3A4-3?fmt=webp) ## Car Sharing Solution by E.ON [find out more](https://www.eon.com) ![E-Mobility](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-14%3A4-3?fmt=webp) ## MCS Item No 5 Coloring book ut scenester ipsum irony ### I'm baby celiac twee palo narwhal freegan celiac I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. Next level cloud bread shaman ugh, polaroid messenger bag lyft pug bespoke ea. Esse duis cronut godard 8-bit ut velit nisi. Coloring book ut scenester ipsum irony elit activated charcoal. Ramps narwhal freegan celiac ea ex nisi. ![dummy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-16%3A2-1?fmt=webp) ## E.ON Family & Friends [find out more](mailto:info@eon.com) ![E.ON Friends](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-15-1%3A4-3?fmt=webp) ## MCS Item No 6 Family & Friends lomo eu kombucha ### I'm baby celiac twee palo narwhal freegan celiac I'm baby celiac twee palo santo stumptown aliquip ea nostrud copper mug veniam health goth heirloom pok pok ennui pariatur. Everyday carry jean shorts labore, kinfolk echo park la croix meh. Next level cloud bread shaman ugh, polaroid messenger bag lyft pug bespoke ea. Esse duis cronut godard 8-bit ut velit nisi. Coloring book ut scenester ipsum irony elit activated charcoal. Ramps narwhal freegan celiac ea ex nisi. ![dummy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-16%3A4-3?fmt=webp) ## E.ON Family & Friends [find out more](mailto:info@eon.com) ![Family & Friend](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-16%3A4-3?fmt=webp) ### Usage Rules & Features ##### Features - Can have multiple MCS Items - Features static or dynamic Background Image - Can be added as Hero Component or in Grid Control (12 Column Grid) - Can have a Promo Flag on any Item ##### Properties - Auto Sliding is possible and can be configured in Seconds - Background can be made blurred ##### Design - MCS offers a Lot of Color Schemes - Grid in MCS Item is restricted to 12, 6-6, 4-8, or 8-4 Column Layout ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | no | | 8 | no | | 9 | no | | 10 | no | | 12 | yes | The MCS can be placed in Hero Component Area or inside a Grid Control. If it is used inside a Grid Control, 12 Column Grid should be used for it only and Section should have *span-over-full-width* and *r**emove-grid-margins* active. ##### DO's - For Auto Slide Feature, 6 or 8 Seconds as Slider Time are good Options - Use it rarely on a Page - Use it best as Hero Component ##### DONT's - Do not use it in smaller Grid than 12 Column Grid - Do not use it on Section without having span-over-full-width and remove-grid-margins active ## 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) #### Keep in Mind - If it is used inside a Grid Control, 12 Column Grid should be used for it only and Section should have span-over-full-width and remove-grid-margins active. - For Auto Slide, 6 or 8 Seconds as Slider Time are good Options. ### Add Multi Content Stage Add the MCS Component to the Parsys on Top of the Page or inside a Grid. If it is used inside a Grid Control, 12 Column Grid should be used for it only and Section should have *span-over-full-width* and *remove-grid-margins* active. Then, open Editor Dialog of the MCS Component and add a multiple MCS Item for each Slide needed in Content Items Tab. In Properties Tab, Editor can select to blur Background, to Auto Slide, to Darken Background Image, as well as selecting a Color Scheme. [Learn more about recommanded Color Combinations](https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage/multi-content-stage-color-schemes.html) [Find out more about Auto Sliding of MCS](https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage/multi-content-stage-auto-sliding.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs_add-content-items%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs_properties-dif-img%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs_properties-color%3A1-1?fmt=webp) ### Configure Background Option Editor has three Options for the Background of the MCS. If Editor wants to have a **Static Background Image**, the Dropdown Background Options needs to be set to *Same Image*. Then, a Static Image Tab appears in Editor Dialog, where it can be configured like normal Image Component. Cropping needs to be done with 2:1 Ratio. Else, if **Background Image should switch depending on MCS Item**, it needs to be configured on each Item itself (see below) and Dropdown Background Options needs to be set to *Different Image*. The third Option is to have a **Color as Background**. Then, Dropdown Background Options needs to be set to *Background Image*. and a Color must be selected [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/mcs_properties-static-img%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs_static-img%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs_switch-items%3A16-9?fmt=webp) ### Switch between Items Editor can click on the second Icon in Toolbar to select a Panel to switch between the MCS Items. ### Configure clickable Part To open the Editor Dialog of a MCS Item, Editor needs to click on lower Part of the Content Area (below Content Parsys). In the MCS Item Dialog an Icon, a Headline, a short Text, an Image, and a Background Image can be configured for the clickable Part of a MCS Item. In first Tab, the following Things can be configured: - Icon Name Selection - Headline (should be short) - Text (should be short) In second Tab, Editor needs to add a Desktop Image (Image of Tile) and crop it. Furthermore, in last Tab a Background Image can be added, if no static Image is wanted (for static Image see above). [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) [Adding Icons to the Dropdown List via Configuration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-multi-content-stage-icon-config.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item_open-dialog%3A2-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item_config%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item-img-desktop%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item-img-background%3A3-4?fmt=webp) ### Configure a Promo Flag If a Promo Flag should be added, Editor needs to choose it in first Tab of MCS Item Dialog. This makes Tab, called Promo Flag, appear, on which Editor can add Text and choose Alignment and Color. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item_add-promoflag%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item_configure-promoflag%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/mcs-item_add-content%3A2-1?fmt=webp) ### Add Content In the Beginning, the first MCS Item is shown for Editing. Editor needs to add a Grid Control as first Element in each MCS Item. Then, any Component can be added to the Grid Control. The Grid Control inside MCS Item is restricted to following Grid Layouts: - 12 Column Grid - 6-6 Column Grid - 4-8 Column Grid - 8-4 Column Grid