...
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 Generally 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
Use When
...
Do’s
Make the teaser content independent of its surrounding content.
You want to track Consider tracking the visibility and click-through of the teaser in Google Analytics.
Don’t Use When
...
Don’ts
Don’t use promo teasers to present content that is core to the current page in a visual way.
You don’t have Don’t use promo teaser without 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.
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).
...
Related/Similar Components
Page header
Image + text