Remote Assets Support
The Teaser Component (as of release 2.23.2) supports remote assets. Once configured, you can select assets from a remote 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 Remote Assets Support is 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:descriptionmetadata in DAM or of the current page if no asset is linked.
- Inherit alternative text from page - This option uses the alternative description of the linked asset value of the
-
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.
The Perfect Blend: A New Era of Collaboration with AEM and Workfront
Adobe Customer Success Webinars
Wednesday, Apr 2, 5:00 PM UTC
Explore how Adobe Experience Manager and Workfront integrate to help teams move from ideation to delivery without the usual bottlenecks, ensuring content is organized, on-brand, and ready to go live faster.
Register
Adobe Experience Manager Sites: Top Innovations
Digital interactions are the most critical touchpoints in a customer journey. Brands need to maximize the impact of content to drive...
Tue, Mar 18, 2:00 PM PDT (9:00 PM UTC)
The True Cost of a Failed Implementation
A failed implementation isn’t just an inconvenience — it costs real revenue. Poor execution and misaligned tools disrupt pipelines,...
Wed, Mar 19, 2:00 PM PDT (9:00 PM UTC)
Connect with Experience League at Summit!
Get front-row access to top sessions, hands-on activities, and networking—wherever you are!
Learn more