Teaser

A Core Component, the Teaser is a way to add 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 an author to combine an image, a title, rich-text, and optional link to further content to create a single experience on the page.  The teaser is perhaps the most versatile component an author can choose and features 4 style configurations.

Note: Teaser 1 has a restricion on the length of the title text. Teaser V2 does not have a restriction on the length of the title and has all the same properties as the Teaser component

The Teaser component has four basic options, ranging from full-width, to single column usage. In the larger teaser options, white type is layed over an image. The option of body text can be placed beneath the image.

The four options are as follows: Large Text Over Image; Text Over Image; Text Beside Image; Text Below Image.

The Large Text Over Image option is used for hero spaces at the top of the page, most often in a full width container. 

In the Configure panel, the Image tab is used to add an image. Once done, the Text tab can be used to add headline text. In this tab, there is an option to select Large Text Over Image. There is a tab for Links, if linking the image to another page or website is desired.

The Text Over Image option is used to break up dense portions of body content.

In the Configure panel, the Image tab is used to add an image. Once done, the Text tab can be used to add headline text. In this tab, there is an option to select Text Over Image.