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
Item | Type |
Heading | Basic Text |
Description | Basic Text |
Disclaimer | Basic Text |
Background Image | Media (Image) |
Foreground Image | Media (Image) |
CTA (1+ links or buttons) |
|
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
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).