Teaser Component

The Core Component Teaser Component can show an image, a title, rich-text, and optionally link to further content.

Usage

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.

Version and Compatibility

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.

Next Generation Dynamic Media Support

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.

Sample Component Output

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.

Technical Details

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.

Configure Dialog

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.

Links Tab

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.

• Link - This file links to a content page, external URL, or page anchor.
• Open link in new tab - If enabled, the link will open in a new browser tab.
• Call-to-actions - This option allows linking to multiple destinations.
  • The page linked in the first call-to-action is used when inheriting the teaser title, description, or image.

Text Tab

• Pretitle - The pretitle will be displayed before the teaser’s title.
• Title - Defines a title to display as the headline for the teaser.
  • Get title from linked page - When checked, the title will be populated with the linked page’s title.
• Description - Defines a description to display as the subheading of the teaser.
  • Get description from linked page - When checked, the description will be populated with the linked page’s description.
• ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer.
  • If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
  • If an ID is specified, it is the responsibility of the author to make sure that it is unique.
  • Changing the ID can have an impact on CSS, JS and Data Layer tracking.

Asset Tab

• Inherit featured image from page - Use the image defined in the page properties of the linked page or the current page if none is found.
• Image asset - Drop an asset from the asset browser or tap the browse option to upload from a local file system.
  • Tap or click Clear to de-select the currently selected image.
  • Tap or click Pick to open the asset browser to select an image.
    • If Next Generation Dynamic Media features are enabled, you have multiple options for picking an asset:
      • Local selects from the local AEM asset library.
      • Remote selects from a Dynamic Media library outside of your AEM instance.
  • Tap or click Edit to mange the renditions of the asset in the asset editor.
• Alternative text for accessibility - This field allows you to define a description of the image for visually impaired users.
  • Inherit alternative text from page - This option uses the alternative description of the linked asset value of the dc:description metadata in DAM or of the current page if no asset is linked.
• Don’t provide an alternative text - This option marks the image to be ignored by assistive technologies like screen readers for cases where the image is purely decorative or otherwise conveys no additional information to the page.

Styles Tab

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.

Edit Dialog

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.

Design Dialog

The design dialog allows the template author to define the teaser options that the content author has when using this component.

Teaser Tab

• Call-To-Actions
  • Disable Call-To-Actions - Hide the Call-To-Actions option for content authors
• Elements
  • Hide pretitle - Hides the Pretitle option for content authors
  • Hide title - Hides the Title option for content authors
    • When selected the Title Type is hidden
  • Hide description - Hide the Description option for content authors
• Default Title Type - Defines the H tag to be used by the title of the teaser.
• Image Delegate - Informational display indicating to which component the Teaser delegates image handling.

Styles Tab

The Teaser Component supports the AEM Style System.

Adobe Client Data Layer

The Teaser Component supports the Adobe Client Data Layer.