Skip to main content Skip to secondary navigation

Teaser

Main content start

The Teaser Paragraph allows you to pick specific pieces of dynamic content (i.e. Events, News, and People) to highlight on pages throughout your site. You can display a Teaser for a single content item, or you can add multiple content items together to create a curated list of teaser items.

See below for example Teasers. For potential use cases for Teasers, as well as a comparison between the Teaser and Lists paragraphs, see Comparing Teaser and Lists.

Teaser Components

The Teaser paragraph is made up of four parts:

  • Content Item(s): The content you would like to feature. Supported content includes your dynamic events, events series, news, and people. 
  • Headline: Headline will appear above the content item(s) in large font.
  • Description: Description will appear below the headline and above the content item(s).
  • Button: Button is displayed underneath the content item(s).
Teaser fields

Adjusting Teaser for gap issue

Depending on the number of Teaser items that you add (e.g. five or eight items), a gap may appear between the last two items. If you encounter this issue, our recommended workaround would be to create an additional Teaser on a new row, and add your final two items there instead of within the initial Teaser.

Teaser with five items

Teaser with five items

Teaser with three items on one row, followed by Teaser with two items on one row

Teaser with three items on one row, followed by Teaser with two items on one row

Teaser Examples

Teaser featuring an event and news item, with optional headline, description, and button:

Example Teaser

News Teaser:

News Teaser

Event Teaser:

Event Teaser

Person Teaser:

Person Teaser

Teaser with two News Items on full-width page layout:

Teaser with two news items

Teaser with an event, a Person, and a News Item:

Teaser with event, person, and news item

Teaser Paragraph with multiple items in a row:

Teasers can also display differently when sharing a row with other paragraphs. For example, the Teaser below stacks vertically when sharing a row with another paragraph, in this case a Text Area.

Vertical Teaser with event, person, and news item