Show Menu
TOPICS×

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.
Component Version
AEM 6.3
AEM 6.4
AEM 6.5
v1
Compatible
Compatible
Compatible

Sample Component Output

The following is a sample taken from We.Retail.

Screenshot

Component Library

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

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

Edit Dialog

The Teaser Component delegates image rendering to the Image Component. Therefore the #(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 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

Styles Tab

The Teaser Component supports the AEM Style System.