--- title: "Content & Media" description: "This is a page including several components for accessibility testing" path: https://www.eonshowroom.eon.com/en/best-practice/accessibility-testing/content-and-media.html lastModified: 2025-08-07T08:13:21.922Z --- # Content & Media # Hello there ! Stage is a Hero Component Video type: file Video source: https://www.eonshowroom.eon.com/content/dam/foundationNG/videos/video_city.mp4 ![Solar Pannels on a Field](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eon-solarpark-tucson_351_RGB%3A2-1?fmt=webp) [How to Configure](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage.html) [Web Component (Storybook)](https://master.storybook.ui.services.eon.com/?path=/story/stage--interactive) # Accessibility Testing for Content & Media [Info Icon Key: info-icon-1] [Info Icon Aria Label: info about this headline] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### Red 500 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] [Headline](#headline) [Badges](#badges) [Bullet List](#bullet-list) [Business Card Author](#business-card-author) [Business Card Contact](#business-card-contact) [Clickable Image](#clickable-image) [Map](#map) [Table](table) [Image](#image) [Video & Pictogram](#video-pictogram) [Eye Catcher](#eyecatcher) # This Is a Headline with Info Icon [Info Icon Key: info-icon-2] [Info Icon Aria Label: open tooltip for more information] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ##### Red 500 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-2] ### One more Headline with Info Icon [Info Icon Key: info-icon-3] [Info Icon Aria Label: open tooltip for more information] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-3] ##### Red 500 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-3] ## Showcasing the Badges Component ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/best-preis-garantie.png) Best Preis Garantie (linked) [Link to Best Price Page](https://www.eonshowroom.eon.com/en.html) ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/kudenauszeichnung_eKombi.png) eKomi Kundenauszeichnung (Download) [Download](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/20171009_BAGE_G_1_Preisblatt_RLM_2018_vorl.pdf) ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/Oekogas_first_climate.png) Ökogas - First Climate ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/focus-money-service-koenig.png) Focus Money - Service König ## Showcasing the Bullet List - Chocolate cake apple pie marshmallow. Jelly-o chocolate bar caramels chupa chups carrot cake sugar plum cupcake bonbon brownie. - Features Tooltip - Chocolate bar pie brownie cupcake wafer jelly beans bear claw chupa chups. Muffin marshmallow cake chocolate cake jelly-o. - Chupa chups jujubes marshmallow icing dessert fruitcake danish topping. Muffin apple pie tootsie roll toffee bonbon soufflé topping gummi bears. [Info Icon Key: info-icon-4] [Info Icon Aria Label: Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-4] ## Showcasing Business Card Author ## Mr. E.ON Martin Luthar Working with E.On Energy, Germany. Email: abc123@eon.com Phone: +4912345 Facebook: https://facebook.com/eoninovation LinkedIn: https://www.linkedin.com/MarioRossa Instagram: https://instagram.com/eon_se Twitter: https://twitter.com/EON_Sprecher ![Mr. E.ON Martin Luthar](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Male_Colleague%3A1-1?fmt=webp) ## Showcasing Business Card Contact ![Martin Luthar](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/man_with_big_smile%3A4-3?fmt=webp) #### Martin Luthar Working with E.ON Digital Technologies Brüsseler Platz 1 45131 Essen [martin.luthar@eon.com](mailto:martin.luthar@eon.com) [+49 0201 1234 56789](tel:+49 0201 1234 56789) [Facebook E.ON](https://www.facebook.com/EON) [LinkedIn E.ON](https://www.linkedin.com/company-beta/4383/) [Instagram Channel E.ON SE](https://www.instagram.com/e.on_se/) [add E.ON at Tiktok](https://www.tiktok.com/@eon_de) ## Showcasing Clickable Image ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/clickable-image-dummy%3A16-9?fmt=webp-alpha) Solar Panel ##### Solar Panel ![Solar Panel](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eon-solarpark-tucson_351_RGB%3A2-1?fmt=webp) A Solar Cell Panel, Solar Electric Panel, Photo-Voltaic (PV) Module or Solar Panel is an assembly of Photo-Voltaic Cells mounted in a Framework for Installation. Solar Panels use Sunlight as a Source of Energy to generate direct current Electricity. A Collection of PV Modules is called a PV Panel, and a System of PV Panels is called an Array. [Phone us](tel:00495555555) Wind Turbine ##### Wind Turbine ![Wind Turbine](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/wind_energy_green_fields%3A2-1?fmt=webp) A Wind Turbine is a Device that converts the Kinetic Energy of Wind into electrical Energy. Hundreds of Thousands of large Turbines, in Installations known as Wind Farms, now generate over 650 Gigawatts of Power, with 60 GW added each Year. Electric Car ##### Electric Car ![Electric Car](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Geiselwind_EMobility%3A2-1?fmt=webp) There is no Mobility without Vehicles There is already a large Number of different electrically driven Cars, Motorcycles, Scooters and Bicycles available Today. When it comes to Cars, in particular, Customers have a choice of completely different Drive and Energy Storage Concepts. [E-Mobility by E.ON](https://www.eon.com/en/new-energy/e-mobility.html) ## Showcasing Map ## Milano MI: Via Amerigo Vespucci, 2 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Milano MI, Italy **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Landshut: E.ON-Allee 5 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at Landshut EDG **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brucker Holt 58 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise%3A3-1?fmt=webp) ### Welcome at E.ON Service GmbH in Essen **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## München: Arnulfstraße 203 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at München EDG **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Wien: Wienerbergstraße 9 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Austria **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Opernplatz 1 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Innogy in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : I. Dellbrügge 7 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Service Cente in Essen, Germany **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brüsseler Platz 1 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise?fmt=webp) ### Welcome at E.ON in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Showcasing Table | Title | Production Budget | Box Office | | --- | --- | --- | | Star Wars Ep 1 The Phantom Menace¹ | 115.000.000 | 1.027.044.677 | | Star Wars Ep 2 Attack of the clones | 115.000.000 | 656.695.615 | | Star Wars Ep 3 Revenge of the sith | 115.000.000 | 848.998.877 | | Star Wars Ep 4 Return of the Jedi | 32.500.000 | 475.106.177 | ¹ Footnote text and explanations ² Second footnote reference ## Showcasing Image ![E.ON solar farm at sunset](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/solarpark_tucson_late_evening%3A2-1?fmt=webp) ## Eye **Catcher** ## Showcasing Video & Pictogram ### Icons ## E.ON Drive: Freedom is Electric (English - full version) Video type: YouTube Video URL: https://www.youtube.com/watch?v=ZbmdhHaNLhQ ![E.ON Drive: Freedom is Electric (English - full version)](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_windpark_roscoe_evening_sun_set%3A16-9?fmt=webp) ## Video with German Subtitles Video type: YouTube Video URL: https://www.youtube.com/watch?v=xNmf-G81Irs ![title](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/abstract_patternnetworkredblue1%3A16-9?fmt=webp) #### Number 123456.11 kWh