The teaser component promotes content on another page or site which is complementary to or related to the current page content.
...
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 behaviour may adjust for promos/teasers that use the card style.
Foreground imagery is disconnected from background imagery and can be positioned independently across breakpoints.
It is worth investigating if style decisions can be made programmatically based on the position of where teasers are used. For example, if added to the “Hero” field on the home page, it will take default hero styling. If added to the ‘major’ or ‘minor’ aside fields in the template it could take inline or subtle presentations. This is more of a conversation though around connecting the DS and the CMS content model.
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”.
...
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>. Both <asides> and <articles> require headings, which teasers mandateBy 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.
...
Wider Conversations that may impact this
Breakpoints: nfig
Heading control: Configurable (ideally not) vs programmatically determined (preferred)
...
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.