Teaser

Description

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.

Authoring

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 each of the Properties Tabs:

Image

Drop in an image of your choice.
Enter image alt text.

Text

Select the desired image placement. Choose from image above text, image left of text, and image right of text.
Enter title for the teaser, or get page title from the linked page.
Enter description for the teaser, or get page description from the linked page.

Link & Actions

Link the teaser to a page or document.
If the linked page as an image configured, the teaser will automatically pull it. But you can overwrite the image in the image tab.
Enable call to actions as needed or else the title will be clickable with the link configured.

Dynamic Media Settings

Disable Dynamic Media: If you are using a transparent PNG image, you will need to select this option
Dynamic Media Presets: As of this writing there are two standard Dynamic Media Presets for the Teaser
- 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

Select white text style if the Teaser is placed in a dark background container and vice versa.