/
'Promo' & 'Teaser' component

'Promo' & 'Teaser' component

Owned by Julia Boyarshchikova (Deactivated)
Last updated: Jul 18, 2022 by Sergiy Nalyvayko (Unlicensed)
2 min read

Component type

Molecule

Component possible inclusions

Design source (in Figma)

Teaser & Promo block

Component status

https://rb-digital.atlassian.net/browse/DSD-61

Introduction

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

Anatomy

Key Content  

Item 

Type 

Heading 

Basic Text 

Description 

Basic Text 

Disclaimer 

Basic Text 

Background Image 

Media (Image) 

Foreground Image 

Media (Image) 

CTA (1+ links or buttons) 

 Components

Editorial

  • Keep headings short, direct and attention-grabbing. 

  • Keep descriptions equally concise – tease to encourage the click through. 

  • Make CTA text enticing. Avoid phrases like “Read more”.

Visual Style 

Heroes and Teasers can come in many different visual styles. They are however categorized into one of core types:

Hero

Hero teaser is generally limited to the home page only and will often be deeper than other teasers.  

Inline

Inline teaser takes the space of the container they are placed in. Normally these sit towards the bottom of the page as asides, but may sometimes appear within content (e.g. articles). 

Subtle

Subtle teaser has similar placement to Inline teaser, but with a more subtle visual style, usually a thin strip. 

Behaviour 

  • Clicking on a call to action will activate it (link or button) – the whole element itself is not clickable (default) due to its size and the possibility of miss-clicks. This behavior may adjust for promos/teasers that use the card style. 

  • Foreground imagery is disconnected from background imagery and can be positioned independently across breakpoints. 

Usage

Do’s

  • Make the teaser content independent of its surrounding content. 

  • Consider tracking the visibility and click-through of the teaser in Google Analytics.

Don’ts

  • Don’t use promo teasers to present content that is core to the current page. 

  • Don’t use promo teaser without one or more calls to action. 

Analytics & Data 

  • Internally linked teasers can be optionally tracked in Google Analytics as an Internal Promotion. The necessary metadata for the data Layer is likely to be included in a parent container 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). 

Related/Similar Components 

  • Page header

  • Image + text