--- title: "Badges" description: "New Badges can be used to add Sales Awards or any Type of decorative Images in a good looking Pattern." path: https://www.eonshowroom.eon.com/en/content-elements/badges.html lastModified: 2024-11-06T13:34:32.484Z --- # Badges # Badges ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/best-preis-garantie.png) Best Preis Garantie (linked) [Homepage](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 (linked) [Homepage](https://www.eonshowroom.eon.com/en.html) ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/focus-money-service-koenig.png) Focus Money - Service König (linked) [Homepage](https://www.eonshowroom.eon.com/en.html) [How to Configure](#how-to) ### Description The Badges Component can be used to to add Sales Awards or any Type of decorative Images in a good looking Pattern which is adjusted according to selected Viewport. - Add Sales Awards or decorative Images - Using original File no Renditions - Badges shown in 160 x 120px format on Desktop Viewport [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-badges-badges--interactive) ### Inspirations ### 6-fach ausgezeichnet. Jetzt zu E.ON wechseln! - Innovativ und nachhaltig - Dauerhaft günstig - Mehrfach ausgezeichnet - Ausgezeichneter Service - Bester Energieversorger in Deutschland - 6-fach ausgezeichnet ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/best-preis-garantie.png) Best Preis Garantie ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/kudenauszeichnung_eKombi.png) eKomi Kundenauszeichnung ![](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 ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/Verivox-Platz.png) Verivox - 1. Platz - Deutschlands bester Energieversorger ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/focus-money-beste-energieversorger.png) Focus Money - Deutschlands beste Energieversorger ### Usage Rules & Features ##### Features - Text and Image is clickable if Link is maintained - A maximum of 6 Images can be added ##### Properties - Included Images should be 160 x 120px - No Cropping needed - Image Height can be defined per Badge - For each Image Information Text can be added ##### Design - Different Alignments for Badges, Images, and Texts are available - 2 or 3 Column Design for Mobile Viewport is available ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ### DO's - Maintain it as Link to make the whole Image and Text clickable - Add a maximum of 6 Images as Badges in 160 x 120 px Format ### DONT's - Do not use it in small Grids like 2, 3, or 4 Column Grid - Do not store Badge Images in DAM Image Folder, but in another DAM Folder outside DAM Image Folder ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Choose Alignments ![Choose Alignments](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/badges_alignment%3A1-1?fmt=webp) At first, Editor can choose the Alignment of the **Badgets** itself. Available Alignments are: - Left - Center - Right - Space Around - Space Between - Space Evently Then, **Image** can be aligned inside the Badges with following Options: - Images Centered - Images Top - Images Bottom Furthermore, **Text** can be aligned inside the Badges with following Options: - Text Centered - Text Top - Text Bottom ![Choose Layout for Mobile Viewports](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/badges_mobile-layout%3A1-1?fmt=webp) ### Choose Mobile Layout Beside Alignment, Editor can choose the Layout of the Badgets for Mobile Viewports. Therefore, 2 or 3 Column Layout is possible. ![Define Saturation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/badges_saturation%3A1-1?fmt=webp) ### Define Saturation Furthermore, Editor can define Saturations of the Badget Images. Available Saturations are: - Original Image (100%) - Semi-Gray (50%) - Gray (0%) **Keep in Mind:** On Hover, Badges Image is always coming with 100% Saturation. ### Add Badgets Editor need to add at least one Badget Element by clicking on Add Button and filling in the upshowing Fields. These Fields are the following for each Badget: - Badget Description This is the Text shown under the Image of the Badget. - Badges Height Editor can apply different Height per Badget, by enabling corresponding Checkbox and entering Badget Height per Badget in Pixel (px) or Percent (%). - Link Tile This is the Link Title, as each Badget can be a Link. - URL This is the Path where the Link should lead to, as each Badget can be a Link. - Open in new Window It is possible to open the Link in another Window. - Badget Image Path This is the Path to the Image. - Decorative Image Decorative Image is selected by default. If Editor wants to enter Alt-Text and Title, it must be unchecked. An Alt-Text (Alternative Text) is a brief Description of an Image that provides Context used by Assistive Technologies, like e.g. for visually impaired Users, or when Images are disabled. While the Title Tag of an Image is an optional HTML Attribute that can be used to provide additional Information or a Tooltip when a User hovers over the Image. It is not a Replacement for the Alt-Text. **But: Do not use it, if it does not bring any Value to the (visually impaired) User.** ![Add a Badget Element](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/badges_add2%3A3-4?fmt=webp) ![Badget Options for none Decorative Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/badges_no-deco-img2%3A3-4?fmt=webp)