--- title: "Basic Teaser" description: "The Basic Teaser Component can be used to highlight special Information linking to further Content." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/basic-teaser.html lastModified: 2025-12-01T12:49:53.348Z --- # Basic Teaser # Basic Teaser ### Use me please! I'm the Future of Teasers Get to Know the Basic Teaser [How to Configure](#how-to) ### Description The Basic Teaser Component can be used to highlight special Information linking to further Content. - Has 5 different Variants - Supports different Ratios - Fully clickable [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/teaser-basic-teaser--interactive) ### Inspirations ## Talk to Plants Sustainability Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [Link me](#) ## Embrace the Sun Have some fun ![Embrace the Sun](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/man_on_sunny_winter_day%3A1-1?fmt=webp) Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. [Link me](#) ## Buy your Food Family Shopping Day ![Car with Supermarket Products and smiling kids with mum as driver](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/e-mobility_family_shoping%3A2-1?fmt=webp) The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. [Link me](#) ## Get yours Electrified Bike A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. [Link me](#) ### Usage Rules & Features ##### Features - Can be with or without an Image - No Parsys, but simple Teaser ##### Properties - Different Ratios are configurable - Pictogram is addable for no Image Variants ##### Design - For Text only and Text + Image Variants, Basic Teaser Background can have different Colors, but for Product Variants only default Color is available - Text Variants have a Link, while Product Variants have a Button ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | no | | 9 | no | | 10 | no | | 12 | no | ##### DO's - If an Image is used, always crop it - Add only short Intro Text - It's a Teaser ##### DONT's - Do not use it in bigger Grid then 6 Column Grid - Do not use Basic Teaser as Text on Image Variant in Grid with Same Height Feature active if there is a Column which is higher than the one of the this 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) ![Choose Basic Teaser Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_choose-variant%3A4-3?fmt=webp) ### Choose Variant At first, Editor needs to choose a Variant of the Basic Teaser, as all available Options depend on choosen Variant. Available Variants are the following: - Text only - Text + Image - Text on Image - Product with Image - Product with Pictogram ### Additional Options for Variants Depending on choosen Variant, additional Options appear in Variant Tab. - For **Text only Variant**, as well as for **Text + Image Variant**, Editor can choose Teaser Color. - For **Text on Image Variant**, Editor can choose left (default) or center Alignment. Furthermore, darken Image for better Readability can be selected or deselected. By Default, Image will be darkened. - For **other Variants**, there are no additional Options. ![Choose Color](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_variant-color%3A4-3?fmt=webp) ![Choose Alignment](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_variant-alignment%3A4-3?fmt=webp) ![Configure Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_image%3A3-4?fmt=webp) ### Add Image For all Flexible Offset Teaser (except for no Image Variant) at least one Image must be added in same Way as for [Image Component](/content/foundationNG/en/content-elements/image.html). - For **Text + Image Variant**, as well as for **Product + Image**, only Desktop Image must be provided. - For **Text on Image Variant**, Desktop, Tablet, and Mobile Image must be provided. ### Configure a Link or Button For Product Variants, a Button needs to be configured, while for other Variants a Link needs to be configured. For configuring a Link in Interaction Tab, URL, Text, and Title is needed. Furthermore, Link can be set to open in new Window. For configuring a Button in Interaction Tab, also URL, Text, and Title is needed. Also for Button, it can be set to open in new Window. Furthermore, it is possible to activate Full Width of the Button either only on Mobile or on all Viewports. [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 Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_interaction-link%3A1-1?fmt=webp) ![Configure a Button](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_interaction-button%3A1-1?fmt=webp) ### Configuration of Variants with Pictogram ![Headline & Text Tab of Text only Variant and of Product with Pictogram Variant](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_content_with-picto%3A3-4?fmt=webp) ### Maintain Content For **Text only Variant** and for **Product with Pictogram Variant**, following Options are available in Headline & Text Tab: - Pictogram Optional Pictogram can be choosen. - Headline Headline Text must be entered as Headline is mandatory. - Size Size of Headline can be choosen from H3 to H5. - HTML Tag for SEO The HTML Tag for SEO can be configured from H1 to H5 or as p Tag. - Subheadline Subheadline can be entered as well. - Intro Text Also an Intro Text can be provided. ### Configuration of Variants without Pictogram ![Headline & Text Tab of all other Variants](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/basic-teaser_content_without-picto%3A3-4?fmt=webp) ### Maintain Content For **all other Variants**, following Options are available in Headline & Text Tab: - Headline Headline Text must be entered as Headline is mandatory. - Size Size of Headline can be choosen from H3 to H5. - HTML Tag for SEO The HTML Tag for SEO can be configured from H1 to H5. - Subheadline Subheadline can be entered as well. - Intro Text Also an Intro Text can be provided.