--- title: "Offset Teaser" description: "The Offset Teaser Component can be used to display highlight Information on a Page." path: https://www.eonshowroom.eon.com/en/teasers-and-highlights/flexible-offset-teaser.html lastModified: 2025-06-11T12:32:27.818Z --- # Offset Teaser # Offset Teaser ## Take a Break Have some Fun The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl [quack](https://www.eonshowroom.eon.com/en/about-foundation-2020.html). - Olé - Hip hip hura - Funny Stuff [How to Configure](#how-to) ### Description The Offset Teaser Component can be used to display highlight Information on a Page. - Features like Alt-Text, and Title are available - Lazy Load is default Option (but it is deselectable) - 5 different Variants with Autoadjusting to the Grid [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/teaser-offset-teaser--interactive) ### Inspirations ## Without Image That is also an Option Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. [Try me](#how-to) ## Shout it out Let's get Loud ###### Flexible Offset Teaser has also a Full Width Variant. [Info Icon Key: info-icon-1] [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] ###### Quick, Baz, get my woven flax jodhpurs! **"Now fax quiz Jack!"** my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. [Go to How-To](#how-to) ### Usage Rules & Features ##### Features - 4 different Offset Teaser Sizes from small to Full Width - No Image Variant additionally ##### Properties - Additional Parsys to add further Content - Text features Rich Text - Buttons, or a Link can be included - Info Icon can be added ##### Design - Textbox Alignment can be left or right to the Image - A Lot of Color Schemes are choosable ##### 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 - Always crop the Image ##### DONT's - Do not add to many Items in Parsys - It's still a Teaser ## 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) ![Select Image & Teaser Size](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_choose-size%3A4-3?fmt=webp) ### Choose an Image and Teaser Size In Variant Tab, Editor must choose a Offset Teaser Image and Teaser Size at first. Depending on Selection, Configuration Options could differ slightly. Selectable Image and Teaser Sizes are: - Small - 1:1 Image - Small (no offset) - 1:1 Image* - Large - 2:1 Image - Full Width - 2:1 Image - No Image - Text only * Small (no offset) - 1:1 Image is only working with UI-Kit 4.8.0 and higher. ![Configure Teaser Type](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_configure-type%3A4-3?fmt=webp) ### Configure Type For Configuring the Offset Teaser Type, Alignment of the Text-Box can be choosen to be left or right. This is not possible for no Image Variant. Furthermore, Teaser Color can be selected. ![Configure Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_image%3A1-1?fmt=webp) ### Add Image For all 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 small Variants only Desktop Image must be provided with 1:1 Ratio. - For other Image Variants Desktop Image must be provided with 2:1 Ratio. Additionally, Tablet and Mobile Image must be provided with 4:3 Ratio each. [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) ![Add some Content](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_content%3A1-1?fmt=webp) ### Maintain Content For all Offset Teaser Variants Headline and Text Tab can be maintained. In this Tab, Headline, Subheadline, and Text can be added. The Headline is always coming as H2, but the HTML Tag for SEO can be configured to be different. Beside that, Text can be maintained with Rich Text Features. Moreover, 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) [Read More about Rich Text Features](https://www.eonshowroom.eon.com/en/content-elements/text.html) ![Configure no CTA](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_cta-none%3A2-1?fmt=webp) ### Configure a Button or Link(s) If Editor likes to add an Interaction, the CTA Type needs to be set to Button or Link in Interaction Tab, then the Dialog expands to configure Button or Link with URL and Text. Also multiple Links can be added. [Read More about configuring Links](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 CTA as Link(s)](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_cta-links%3A1-1?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_cta-button%3A1-1?fmt=webp) ![Parsys in Content Header (Example shows Small - 1:1 Image Variant)](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/flexible-offset-teaser_parsys%3A2-1?fmt=webp) ### Add additional Content All Offset Teaser Variants have Parsys to contain additional Content. In this Parsys following Components are addable: - [Badges](/content/foundationNG/en/content-elements/badges.html) - [Bullet List](/content/foundationNG/en/content-elements/bullet-list.html) - [Button](/content/foundationNG/en/content-elements/button.html) - [Eye-Catcher XL](/content/foundationNG/en/specials/eye-catcher.html) - [Free HTML](/content/foundationNG/en/specials/free-html.html) - [Headline](/content/foundationNG/en/content-elements/headline.html) - [Links](/content/foundationNG/en/content-elements/link.html) - [Pictogram](/content/foundationNG/en/content-elements/picotgrams.html) - **Spacer** - [Text](/content/foundationNG/en/content-elements/text.html)