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