Teaser

Teaser is a component designed for adding an image associated with text to a page. The purpose of the Teaser is to break up the blank canvas or large bodies of text, by adding visual interest to the page.

The Teaser component allows you to combine an image, a title, rich-text, and optional link to further content to create a single experience on the page.
 

Configure the Image tab

• Image Asset: Drag and drop an image from the Side Panel or select one using the image icon.
• Image is decorative: When checked, images are marked decorative, meaning they are purely visual elements that do not require alt-text to be applied.
• Image Alt Text: If needed, enter alt-text for the image.
   

Configure the Text tab

• Style Variant: Select the desired image placement. Choose from image above text, image left of text, and image right of text.
• Title: Enter title for the Teaser.
• Title Type: Select a heading value to set for the Title.
• Get title from linked page: When checked, the title of the linked page in Link & Actions tab will automatically fill the Title field.
• Description: Rich Text Editor (RTE) field. Authors can enter a custom description.
• Get description from linked page: When checked, the description is automatically pulled from the linked page.
   

Configuring the Link & Actions tab

• Link: Set a link to a page or document.
• Open in New Tab: When checked, links will open in a new tab instead of the same tab.
• Enable Call-To-Actions: When checked, enables multiple call to actions to be added as needed. Supports an Icon, Link, Text, and Aria Label to be set for each CTA.
   

Configuring the Dynamic Media Settings tab

• Disable Dynamic Media: When checked, disables dynamic media for the image. 
  • If you are using a transparent PNG image or an animated GIF, you will need to select this option.
• Dynamic Media Presets: 
  • TeaserComponent: This is the advised setting.  This will size your image to use the full width of the component.
  • Standard Height: This will resize your image to fit into the standard height (200px desktop).  If your image aspect ratio is not wide enough to fill the component width at that height, then the image will be letterboxed with negative space on the side.
• Image Modifiers: Image modifiers are not advised for this component.  Please leave blank.
   

Configure the Styles

• Text Color: Adjusts the text color in the Teaser.
  • Dark Text: Sets the text to Black.
  • White Text: Sets the text to White.

Just like with the Image Card v2, authors utilize the Teaser component frequently and thus want to know definitive rendered dimensions for images when using different Teaser component configurations.

The Teaser component has 2 Presets: TeaseComponent (default) and TeaserStandardHeight.

The issue with the Teaser component comes in the form of bluriness with images. This tends to occur because images rendered will always "fit" to the rendered space the component is set to, so if the image is small and the Teaser is wider, the image will blur as it scales to fit. Take note the below are for "Image on Top" configuration of the Teaser:

• 4-column wide Teasers use image rendered area of 370 pixels wide.
• 5-column wide Teasers use image rendered area of 470 pixels wide.
• 6-column wide Teasers use image rendered area of 570 pixels wide.
• 12-column wide Teasers use image rendered area of 1170 pixels wide.
• Mobile Teasers use rendered area of 385 pixels wide.

For the "Image on Left/Right" configurations of the Teaser:

• 6-column wide Teasers use image rendered area of 270 pixels wide.
• 12-column wide Teasers use image rendered area of 570 pixels wide.
• Mobile Teasers use rendered area of 385 pixels wide.