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 v1, which was introduced with release 2.1.0 of the Core Components in July 2018, 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.

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.

Image

• 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 Edit to mange the renditions of the asset in the asset editor.

Text

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

Links & Actions

• Link - Link applied to the teaser. Use the path browser to select the link target.
• Enable Call-To-Actions - When checked, enables definition of Call-To-Actions. The first Call-To-Action link in the list is used as the link for other teaser elements.

Edit Dialog

The Teaser Component delegates image rendering to the Image Component. Therefore the [edit dialog](/docs/experience-manager-core-components/using/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
• Title Type - Defines the H tag to be used by the title of the teaser.
• Links
  • Don’t link the image - When selected, the teaser image is not linked
  • Don’t link the title - When selected, the teaser title is not linked
• 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.