AEM Components

Teaser Component

The Teaser is a robust container that organizes several pieces of content. It can include icons, Image, Title, and/or Text components, and can include links to further content or other actions.

There are five Teaser variations: the Basic Teaser, the Section Header Teaser, the Icon Teaser, the Informational Teaser, and the Feature Teaser. All are similar in purpose and use, with different styling options available to best suit an author’s needs.

Sample Teaser with an Image and two CTAs.

Overview

Component name: Teaser

Authors who can use: any

Templates/page types that can use component: all

Required or optional: optional

Authoring Fields

Adding the Teaser component to the page

1. Once on the desired page in Edit mode, add the Teaser by doing the following:

a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Teaser” in the search bar, or scroll to the Teaser in the list. Double click to add to page.

b. Option 2- on the left hand rail, navigate to the Components tab. Type “Teaser” in the search bar, or scroll to the Teaser in the list. Double click to add to page.

Selecting a Teaser variant

There are several Teaser variants. Select the option that will best portray the specific content. Multiple Teasers may appear on one page.

Basic Teaser	Use when the general Teaser structure is needed	Optionally includes pre-title, 1-2 CTAs, and text alignment styling	No Image	No specific Container background color
Section Header Teaser	Use to introduce new sections of content through a Teaser	Optionally includes pre-title, 1-2 CTAs, and text alignment styling	No Image	No specific Container background color
Feature Teaser	Use when dedicating a section to a single story. This Teaser is full-width and intended to be a visual break from the rest of the page. Use sparingly and avoid stacking multiple Feature Teasers on top of each other.	Optionally includes Image, pre-title, 1-2 CTAs, Image alignment styling, and text alignment styling	Optional Image	Apply Container background color "Background Alt"
Informational Teaser	Use when communicating actions that users can take and information relevant to the action, along with a relevant Image	Optionally includes Image, pre-title, 1-2 CTAs, Image alignment styling, and text alignment styling	Optional Image	Apply Container background color "Background Alt"
Icon Teaser	Use when an icon visual is helpful on the page	Optionally includes pre-title, icon, 1-2 CTAs, and text alignment styling	Icon; no image	No specific Container background color

Editing the Teaser component - Basic Teaser/ Section Header Teaser

With the edit wrench, open the component.
General tab
1. Teaser Type dropdown: Select Teaser variant.
2. Pre-title field: Add a pre-title. Recommended character limit is 25 characters.
3. Title field: Add a title. Recommended character limit is 65 characters.
4. Title Heading Level dropdown: Select a heading level between H2-H6.
5. Description field: Add a description. Recommended character limit is 200 characters.
  1. Note that hyperlinks should not contain alternative text.
Links tab
1. Calls-to-action multifield: Optionally add 1-2 CTAs.
2. Link URL field: Add the destination link for the CTA. May be internal or external.
3. Link Text field: Add a label to appear on the CTA.
4. Link Styles dropdown: Select whether the link should be Primary, Secondary, or Standalone style. Only one Primary Link should appear on a Teaser. Default Primary Link.
5. Link Type dropdown: Select whether the link is Internal/External Link, Phone Number, Email, or SMS Message. Default Internal/External Link.
Styles tab
1. Text Alignment dropdown: Select between None, Left, and Center. None alignment is the same as Left. Default None.
2. Remove Padding dropdown: Select between None, Remove Top Padding, Remove Bottom Padding, or Remove Top and Bottom Padding. Default None.

Editing the Teaser component - Feature Teaser / Informational Teaser

Follow the same guidelines as for Basic/Section Header Teaser. Differences are listed below.
General tab
1. Enable Image checkbox: Check to add an Image to the Teaser. Once added, exit the Teaser dialog and open the Image dialog to edit accordingly. Default unchecked.
2. Image Alignment (if applicable) dropdown: Select between Left and Right. Default Left.
Styles tab
1. Text Alignment dropdown: While the options of None, Left, and Center are present, when an Image is enabled, do not select the Center alignment.
To add the Teaser Background, navigate to the Container in which the Feature or Informational Teaser sits. With the edit wrench, open the component.
1. In the Styles tab, select “Container Background” dropdown. Select “Background Alt.” Select “Done.”
2. The background color is now applied.

Editing the Teaser component - Icon Teaser

1. Follow the same guidelines as for Basic/Section Header Teaser. Differences are listed below.

2. General tab

a. Icon field: The field where the author enters the name of the icon from Remix Icon library. Reference the Using Icons guide for more info.

Accessibility

There are no specific accessibility notes for the Teaser component.

Other tips

Feature Teaser images look best at the following ratio/size: 4:3, 1200x900 px
CTA Teaser images look best at the following ratio/size: 1:1, 600x600 px
Use the Emulator widget to test Teaser size on different devices.
Surface Alt color, when added from the Container component, applies a border radius of 32 px, in addition to the color, to distinguish it from the white background.
Icons should be chosen to reinforce the Teaser's purpose, as indicated by the title. Icons have different meanings across cultures, and should be selected carefully.