The teaser component promotes content on another page or site which is complementary to or related to the current page content. 

...

  • Internally linked teasers can be optionally tracked in Google Analytics as an Internal Promotion. The necessary metadata for the dataLayer is likely to be included in a parent contrainer that references the teaser, so the teaser content itself remains independent.  

...

  • Some special CTA functions such as outbound links, retail referrals, downloads, video activations etc will also require tracking (potentially as part of the CTA block functions). 

  • Teasers should have some way of being individually targeted in GTM (e.g. Unique IDs, data-attributes, etc). 

...

  • May allow the background image to be replaced with a decorative video (inc background loading & accessible controls.) 

  • Teasers will likely need to be added within a “Teaser List” at some point, potentially allowing for outcomes like those pictured below. When this happens, there may be some adjustment needed to ensure that multiple items are not all separately set as asides, but that their parent container is – otherwise we may flood the landmarks list. 

...

Image Added

Image Added

  • If teaser that references a product/variant/collection may use the ‘primary pack shot’ as the default foreground image. The product relationship will be included in the tracking meta data. 

  • Expect additional style use cases such as applying shape to the content container (see Harpic) and text directly overlaying imagery (see Finish). This may impact the underlying application of divs. 

  • Expect that teasers (amongst other components) will require visual theming, based on their context. We have already seen this with product-level colour theming in Finish. 

  • If/When we create a “Reference” component for claims and disclaimers, we will be able to separate the disclaimer from this component. 

...

...

Teaser / Promo Examples 

Chameleon (Hero)

...

Gaviscon (Hero)

...

Dettol

...

Finish (Hero)

...

Finish (Inline – full width)

...

Finish (Subtle) 

...

Multi-brands (Subtle)

...

Note that app CTAs do not form part of scope

Air Wick (Inline) 

...

AirWick’s home page combines a number of inline promotions within a layout pattern.