'Promo' & 'Teaser' component

Introduction

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

Anatomy

Related/Similar Components 

• Some teaser/promo styles may look like Page Headers however page headers draw focus to page titles and introductory content: teasers/promos draw attention to peripheral content. 

• Image + Text.

Key Content  

Visual Style 

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

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

Inline 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  Similar placement to Inline, 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

Use When 

• The content can be understood independently of its surrounding content. 

• You want to track the visibility and click-through of the teaser in Google Analytics  (NB: This is likely to be a separate component wrapper that a teaser is added to) 

Don’t Use When 

• You want to present content that is core to the current page in a visual way. 

• You don’t have one or more calls to action. 

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”.

Accessibility 

• As independent content, teasers/promos are sectioned content in HTML. On all but the home page, this content is peripheral, so is best defined as <aside>: on the home page, they are core content, so best defined as <article>. By using sectioning elements, it may help to programmatically determine heading levels, as was the initial intention of the HTML Document Outline. 

• Irrespective of the visual layout of the component, the first element in the container should be the heading. This ensures that screen-readers migrating by heading to not skip content that is effectively attributed to the content prior. 

• Even though the content model may include a image description, when imagery is used decoratively (e.g. background image), it must include an empty alt tag (I.e. alt=””) to avoid being read by a screen reader. 

• CTAs will allow for the inclusion of “long descriptions” to be used as aria-labels is CTA text is short. 

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).