The Core Component Teaser Component can show an image, a title, rich-text, and optionally link to further content.
The Teaser Component allows the content author to easily create a teaser to further content using an image, title, or rich text and linking to further content or other actions.
The template author can use the design dialog to define if the options to create call-to-actions and add links are available as well as disabling various display options. The content author can use the configure dialog to set an image, define CTAs, set titles and descriptions, and configure links to the individual teaser. The edit dialog of the Image Component can be accessed to modify the teaser image.
The current version of the Teaser Component is v2, which was introduced with release 2.18.0 of the Core Components in February 2022, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
|Component Version||AEM 6.4||AEM 6.5||AEM as a Cloud Service|
The Teaser Component (as of release 2.23.2) supports Next Generation Dynamic Media remote assets.
Once configured, you can select assets from a remote Next Generation Dynamic Media service for your teaser component.
To experience the Teaser Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
The latest technical documentation about the Teaser Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
The content author can use the configure dialog to define the properties of the individual teaser. There is also an edit dialog to modify the teaser image if one is selected.
The teaser title, description and image can be inherited from the linked page, or from the page linked in the first call to action. If neither a link nor a call to action is specified, then the title, description and image will be inherited from the current page.
dc:descriptionmetadata in DAM or of the current page if no asset is linked.
The Teaser Component supports the AEM Style System..
Use the drop-down to select the styles that you want to apply to the component. Selections made in the edit dialog have the same effect as those chosen from the component toolbar.
Styles must be configured for this component in the design dialog in order for the drop down menu to be available.
The Teaser Component delegates image rendering to the Image Component. Therefore the [edit dialog](/docs/experience-manager-core-components/using/wcm-components/image.md#edit-dialog of the Image Component is available to the content author to manipulate the teaser image.
The design dialog allows the template author to define the teaser options that the content author has when using this component.
The Teaser Component supports the AEM Style System.
The Teaser Component supports the Adobe Client Data Layer.