--- title: "Card Teaser" description: "The Card Teaser Component can be used to present a Product as Highlight in a Teaser." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/card-teaser.html lastModified: 2025-08-01T12:54:23.541Z --- # Card Teaser # Card Teaser ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/product-no1-2%3A1-1?fmt=webp-alpha) ## Green Light for You Duis autem vel eum iriure dolor elit esse molestie consequat. [Check it out](https://www.eonshowroom.eon.com/en/teasers-and-highlights/card-teaser.html) Reduce carbon by **30%** [How to Configure](#how-to) ### Description The Card Teaser Component can be used to present a Product as Highlight in a Teaser. - Can be with up to 2 Images (For- & Background Image) - Can have vertical or horizontal Layout - Eye Catcher or Promo Flag can be added additionally [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/teaser-card-teaser--interactive) ### Inspirations ![contact](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/young-woman-on-phone-in-kitchen1x1%3A1-1?fmt=webp) ## Foreground Image without Transparency If a Foreground Image without Transparency is used, do not use a Background Image ! [Action intent](#) ![contact](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/product-no3-1?fmt=webp-alpha) ## Transparent Foreground Image with Offset Duis autem vel eum iriure dolor elit esse molestie consequat. [Action intent](#) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/product-no2-1%3A1-1?fmt=webp-alpha) ## Card Teaser with Promo Flag right aligned Duis autem vel eum iriure dolor elit esse molestie consequat. [Action intent](https://www.eonshowroom.eon.com/en.html) Reduce carbon ![contact](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/product-no1-2%3A1-1?fmt=webp-alpha) ## Card Teaser with additional Content Duis autem vel eum iriure dolor elit esse molestie consequat. 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. [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 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-1] ##### H5-Headline in Parsis ###### Subheadline in RTE. Abstract is also possible - The European languages are members of the same family. Copy text is the default - he languages only differ in their grammar, their pronunciation and their most common words. - The languages only differ in their grammar, their pronunciation and their most common words. - To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. Then there is copy small text - To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental > Last but not least there can be a quote in copy which can be used for statements. > Jone Doe, 2021 - Bullet - List [Additional Button](#) [Action intent](#) ### Usage Rules & Features ##### Features - For- and Background Image are available - Features different Promo Types: Eye Catcher and Promo Flag ##### Properties - Offers additional Parsys to contain more Content - Background can be made to have Full Hight to achieve a solid rectangular Card Teaser Shape without any Offset ##### Design - Card Teaser Background can have different Colors - In 8, 9, 10 or 12 Column Layout automatically horizontal Layout is used - In 3 or 4 Column Layout automatically vertical Layout is used ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes | | 4 | yes | | 5 | no | | 6 | no | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Vertical min of 3 and max of 4 Column Grid - Horizontal only in 8, 9, 10, or 12 Column Grid - Use Same Height Feature for Parent Grid - Place Eye Catcher at the same Position for a Card Teaser Group - For Forground Image, only use Image with Transparency ##### DONT's - Do not add too much Text (it is a Teaser) - Do not use a Foreground Image without Transparency ## 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) #### Keep in Mind The Background Image will be masked - more or less, depending on the Amount of Content and Layout Orientation. ### Configure Images In Overlay Image Tab the Foreground Image can be configurated, while on Background Image Tab, the Background Image is configurable. Both Images have some Options as it is known from 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) ![Configure Overlay Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_overlay%3A3-4?fmt=webp) ![Configure Background Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_background%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_text%3A3-4?fmt=webp) ### Configure Content In next Tab, Editor can add a Category. Furthermore, Editor needs to enter a Headline, and can select an HTML Tag for SEO additionally. Beside that, a Text can be entered. Furthermore, 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) ### 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) ![Add Button](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_interaction-button%3A1-1?fmt=webp) ![Add Link](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_interaction-link%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_style%3A1-1?fmt=webp) ### Style Card Teaser Background can be made to have Full Hight to achieve a solid rectangular Card Teaser Shape without any Offset. Beside that, from UI-KKit 4.17.0 on or higher, Overlay Image Height can be limited for better Layout. This Option is active by default. Furthermore, the Color Scheme can be adjusted. ![Choose Promo Type](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_promo-choose%3A4-3?fmt=webp) ### Choose a Promo Type Editor can choose between None, Eye Catcher, and PromoFlag as Promo Type in Style Tab. Depending on the Selection, Options are differing. ![Eye Catcher Configuration - Part 1](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_promo-eyecatcher01%3A3-4?fmt=webp) ![Eye Catcher Configuration](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_promo-eyecatcher02%3A3-4?fmt=webp) ##### Eye Catcher Configuration If Eye Catcher is wanted, corresponding Option needs to be selected in Style Tab. Then the Options to configure X- and Y-Position appear below. Moreover, Editor needs to maintain Eye Catcher Tab. This contains choosing a Variant and enering Content depending on choosen Variant. Eye Catcher Styling is also possible. [Read more about Configuration of an Eye Catcher](https://www.eonshowroom.eon.com/en/specials/eye-catcher.html) ![Promo Flag Configuration](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/card-teaser_promo-promoflag%3A4-3?fmt=webp) ##### Promo Flag Configuration If Promo Flag is wanted, corresponding Option needs to be selected in Style Tab. Then the configurable Options appear in a new Tab called Promo Flag. Editor should enter a Promo Text. Furthermore, Editor can choose Alignment (right, center, left), Color and Promo Flag Size (normal, small).