--- title: "Text Teaser" description: "The Text Teaser Component can be used to highlight different Parts of Content." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/text-teaser.html lastModified: 2025-11-13T09:17:27.296Z --- # Text Teaser # Text & Number Teaser ### Try it out You have a Lot of Options [Info Icon Key: info-icon-1] [Info Icon Aria Label: Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### Opening on Click 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] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [Try me](https://www.eonshowroom.eon.com/en/teasers-and-highlights/text-teaser.html) Highlighting Feature ###### this month by bike [Info Icon Key: info-icon-2] [Info Icon Aria Label: Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ## 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-2] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 256.78 km [How to Configure](#how-to) ### Description The Text Teaser Component can be used to highlight different Parts of Content. - Different Text & Number Variants - Different Headline Styles - Content can be extended via Parsys [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/teaser-text-teaser--interactive) ### Inspirations ##### Text Teaser with Image Here Components like Text Component can be placed. ![Alt-Text](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/women_sitting_by_large_lake_autumn-1%3A2-1?fmt=webp) ##### Text Teaser with Pictogram Here Components like Text Component can be placed. - Bullet - List - Items [Phone Link Button](tel:004912345) ### Number Teaser with Headline Here Components like Text Component can be placed. [Link me](https://www.eonshowroom.eon.com/en/teasers-and-highlights/text-teaser.html) 100 € Number Teaser with Pictogram Here Components like Text Component can be placed. 100 € Long Text will be cutted using Ellipses as you can see here. ### Text Teaser with Pictogram Here Components like Text Component can be placed. [Additional](https://www.eonshowroom.eon.com/en/teasers-and-highlights.html) [Links](https://www.eonshowroom.eon.com/en/teasers-and-highlights.html) [are possible](https://www.eonshowroom.eon.com/en/teasers-and-highlights.html) Features all Variants ### Usage Rules & Features ##### Features - 5 different Variants are available - Features different Promo Types: Eye Catcher and Promo Flag ##### Properties - Offers additional Parsys to contain more Content - Pictogram is available for Text and Number Teaser - Info Icon can additional be added to Intro Text ##### Design - Text Teaser Background can have different Colors - Different Sizes for Headline and Number are available ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | no | | 9 | no | | 10 | no | | 12 | no | ##### DO's - Always crop the Image if using Image Variant - Animate Numbers for Highlighting it ##### DONT's - Do not use it in bigger Grid then 6 Column Grid ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_variant%3A4-3?fmt=webp) ### Choose Variant At first, Editor needs to choose a Variant of the Text Teaser. Available Variants are the following: - Text Teaser - Text Teaser with Pictogram - Text Teaser with Image - Number Teaser with Headline - Number Teaser with Pictogram For each Variant, a Promo Type can be selected by choosing either Promo Flag, EyeCatcher, or None. By default, None is selected. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser-promo%3A1-1?fmt=webp) ### Configure Promo Flag If a Promo Flag is added, an additional Promo Flag Tab appears on Text Teaser Dialog. In that Tab, Editor can enter Promo Text, choose an Alignment (right, center, left) and a Color. ### Configure EyeCatcher If an Eye Catcher is added, Eye Catcher Position (left, right) can be choosen in Variant Tab, and an additional Eye Catcher Tab appears on Text Teaser Dialog. In that Tab, Editor configures Eye Catcher as usually. [Read more about EyeCatcher Configuration](https://www.eonshowroom.eon.com/en/specials/eye-catcher.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser-eye1%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser-eye2%3A3-4?fmt=webp) ### Maintain Content Depending on selected Variant, different Content can be added. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_content_v-text%3A3-4?fmt=webp) ##### Content Tab for Variant Text Teaser For Variant Text Teaser, Editor can maintain following Fields in Content Tab: - Headline Enter Text of the Headline. - Size of Headline Editor can select a Size for Headline from H3 to H5. - HTML Tag for SEO It is possible to choose an HTML Tag for SEO from H1 to H5 or p Tag. - Intro Text Intro Text can be edited with full [Rich Text Editor Features](/content/foundationNG/en/content-elements/text.html). - Enable Info Icon Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_content_v-text-picto%3A3-4?fmt=webp) ##### Content Tab for Variant Text Teaser with Pictogram For Variant Text Teaser with Pictogram, Editor can maintain following Fields in Content Tab: - Pictogram Editor can choose a Pictogram. The Pictogram will be displayed above the Headline. - Headline Enter Text of the Headline. - Size of Headline Editor can select a Size for Headline from H3 to H5. - HTML Tag for SEO It is possible to choose an HTML Tag for SEO from H1 to H5 or p Tag. - Intro Text Intro Text can be edited with full [Rich Text Editor Features](/content/foundationNG/en/content-elements/text.html). - Enable Info Icon Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_content_v-text-img%3A3-4?fmt=webp) ##### Content Tab and Image Tab for Variant Text Teaser with Image For Variant Text Teaser with Image, Editor can maintain the same Fields in Content Tab as for Text Teaser Variant. But an additional Tab will appear which is called Image Tab. In this Image Tab, Editor can add an Image and adjust it in same Way as for normal Image Component. [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/text-teaser_content_v-numb-head%3A3-4?fmt=webp) ##### Content Tab for Variant Number Teaser with Headline For Variant Number Teaser with Headline, Editor can maintain following Fields in Content Tab: - Headline Enter Text of the Headline. - Size of Headline Editor can select a Size for Headline from H3 to H5. - HTML Tag for SEO It is possible to choose an HTML Tag for SEO from H1 to H5 or p Tag. - Number Prefix Enter the Prefix of the Number to be displayed (e.g. <, >, =) - Prominent Number Enter the Number that should be displayed. - Number Unit Enter the Unit of the Number to be displayed (e.g. €, m, sec, etc.) - Number Size Select a Size for the Number from L to XXL. - Animate Numbers Editor can animate the Number to count up from 0 to entered Number. This is activated by default. - Show Decimals With this Option, the Decimal Places are also displayed. - Intro Text Intro Text can be edited with full [Rich Text Editor Features](/content/foundationNG/en/content-elements/text.html). - Enable Info Icon Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_content_v-numb-picto%3A3-4?fmt=webp) ##### Content Tab for Variant Number Teaser with Pictogram For Variant Number Teaser with Pictogram, Editor can maintain following Fields in Content Tab: - Pictogram Editor can choose a Pictogram. The Pictogram will be displayed above the Number. - Number Prefix Enter the Prefix of the Number to be displayed (e.g. <, >, =) - Prominent Number Enter the Number that should be displayed. - Number Unit Enter the Unit of the Number to be displayed (e.g. €, m, sec, etc.) - Number Size Select a Size for the Number from L to XXL. - Animate Numbers Editor can animate the Number to count up from 0 to entered Number. This is activated by default. - Show Decimals With this Option, the Decimal Places are also displayed. - Intro Text Intro Text can be edited with full [Rich Text Editor Features](/content/foundationNG/en/content-elements/text.html). - Enable Info Icon Selecting Enable Info Icon Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_parsys%3A3-4?fmt=webp) ##### Add more Content to Parsys of a Text Teaser More Content can be added to Parsys of a Text Teaser independed from the choosen Variant. Allowed Components are: [Headline](https://www.eonshowroom.eon.com/en/content-elements/headline.html) [Text](https://www.eonshowroom.eon.com/en/content-elements/text.html) [Bullet List](https://www.eonshowroom.eon.com/en/content-elements/bullet-list.html) [Link](https://www.eonshowroom.eon.com/en/content-elements/link.html) [Button](https://www.eonshowroom.eon.com/en/content-elements/button.html) If Editor wants to add a Lot of Content or other Components as the allowed ones, please use [Box Component](/content/foundationNG/en/page-elements/box.html) instead. ### Add Interaction In Interaction Tab, Editor can choose to add a Button, a Link, or to have no Interaction. Depending on the Selection, Editor needs to provide necessary Information. For more Details see: [Links](https://www.eonshowroom.eon.com/en/content-elements/link.html) [Buttons](https://www.eonshowroom.eon.com/en/content-elements/button.html) **For Button there is one additional Option:**It is possible to activate Full Width either only on Mobile or on all Viewports ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_interaction_button%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_interaction_links%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/text-teaser_style%3A1-1?fmt=webp) ### Style Text Teaser In Styling Tab, Editor can choose the Alignment of the Text Teaser. Beside that, by selecting the correct Background Color, it is possible to choose between different Color Schemes for the Text Teaser.