--- title: "Tiles Teaser" description: "The Tiles Teaser Component can be used to highlight special Information linking to further Content." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html lastModified: 2026-03-09T14:35:32.033Z --- # Tiles Teaser # Tiles Teaser ![Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-129991559-1%3A2-1?fmt=webp) ## Green Energy [Call Us for Info](tel:004912345) ## Clean and Colorful [Link Me](https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html) [How to Configure](#how-to) ### Description The Tiles Teaser Component can be used to highlight special Information linking to further Content. - Can be with or without an Image - Supports different Ratios - Link features are available [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/teaser-tiles-teaser--interactive) ### Inspirations ## Tiles Teaser 1x1 [Tiles Teaser Link](https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html) ![Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Young_girls_on_bed_with_tablet_at_night_rgb-1%3A1-1?fmt=webp) ## Tiles Teaser with Image [Call Me](tel:004912345) Eye Catcher Variants ## Tiles Teaser 3x4 [Tiles Teaser Link](https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html) ![wind energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-windpark-roscoe_trees_autumn%3A3-4?fmt=webp) ## Tiles Teaser 3x4 [Tiles Teaser Link](https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html) ![Sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/women_at_beach_in_autumn%3A3-4?fmt=webp) ## Tiles Teaser 3x4 [Tiles Teaser Link](https://www.eonshowroom.eon.com/en/teasers-and-highlights/tiles-teaser.html) ### Usage Rules & Features ##### Features - Can be with or without an Image - Features Eye Catcher as Promo Type ##### Properties - Different Ratios are configurable - Pictogram is addable ##### Design - Tiles Teaser Background can have different Colors - If Tiles Teaser is used in Grid without Gutter, Corners are not rounded ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes (portrait & squared Formats) | | 4 | yes (portrait & squared Formats) | | 5 | yes (landscape Formats) | | 6 | yes (landscape Formats) | | 8 | no | | 9 | no | | 10 | no | | 12 | no | ##### DO's - Use landscape Formats only in 5 or 6 Column Grid - Use portrait & squared Formats only in 3 or 4 Column Grid - If an Image is used, always crop it* * For Desktop Viewports, landscape Formats are preferable, while on Mobile Viewports portrait or square Formats fits better. ##### DONT's - Do not use it in bigger Grid then 6 Column Grid - Do not use Tiles Teaser in Grid with Same Height Feature active if there is a Column which is higher than the one of the Tiles Teaser* * With Same Height Option active, Images will be scaled and cropped by the System. That does not look good. ## 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/tiles-teaser_variant-tab_01%3A2-1?fmt=webp) ### Choose Variant At first, Editor needs to choose a Variant of the Tiles Teaser. Available Variants are the following: - Image (optional Pictogram) - Image with Eye Catcher - No Image (optional Pictogram) - No Image with Eye Catcher Furthermore, Editor can also darken the Image for better Readability by checking the Checkbox of it. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tiles-teaser_eye-tab_01%3A3-4?fmt=webp) ### Add Eye Catcher for Tiles Teaser Variants with Eye Catcher If a Variant with Eye Catcher is choosen, Editor needs to do Configuration in Eye Catcher Tab. In this Tab, the same Options are available as on the Stand Alone Eye Catcher. [Find out 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/tiles-teaser_image-tab_01%3A1-1?fmt=webp) ### Add Image for Tiles Teaser Variants with Image Tile Teaser has three Image Tabs. In these Tabs, Editor can add Images and adjust them in same Way as for normal Image Component. Possible cropping Formats are: - 16:9 (Landscape) - 2:1 (Landscape) - 1:1 (Squared) - 3:4 (Portrait) For Desktop Viewports, landscape Formats are preferable, while on Mobile Viewports portrait or square Formats fits better. [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/tiles-teaser_text-tab_picto_01%3A1-1?fmt=webp) ### Set Text In the Text Tab, Editor need to set a Headline for the Tiles Teaser. Beside that, HTML Tag for SEO and Text (max. 160 Characters*) can be maintained. The Pictogram Selection will only be available for Tiles Teaser Variants without EyeCatcher. * If more than 160 Charcters are entered, Text will be cutted with Elipses at the End. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tiles-teaser_interaction-tab_01%3A3-4?fmt=webp) ### Set Link In the Link Tab, Editor can choose to have a Link or no CTA. The Configuration Options for a Link are same as in normal Link Component. [Learn more about Configuration of Links](https://www.eonshowroom.eon.com/en/content-elements/linking-element.html) ### Styling of the Tiles Teaser In Styling Tab, different Options, depending on choosen Tiles Teaser Variant, are available. For all Variants, Editor can configure vertical and horizontal Alignment. Additionally, following Options are configurable: ###### Image Variants If Editor decided for Image Variant, a Hover Color can be choosen. This Color will be shown when the Image is hovered. Then, Font Color is adjusted automatically depending on selected Background Color. ###### No Image Variants If no Image Variant is wanted, Editor can select Background Color for the Tiles Teaser. Also Aspect Ratios for Desktop, Tablet, and Mobile Viewports are need to be selected. By Default it is 1:1. ###### Eye Catcher Variants For Eye Catcher Variants an additional Alignment Option is available. The horizontal Eye Catcher Position can be left or right. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tiles-teaser_styling-tab_img_01%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tiles-teaser_styling-tab_no-img_01%3A3-4?fmt=webp)