Teaser Paragraph

The Teaser Paragraph allows you to easily highlight other content from your site on a page. You can display a teaser for a single content item, or add multiple content items together to create a curated list of items.

About Teasers

When you add a new Teaser Paragraph, you will see the following fields:

• Content Item(s). The content you would like to feature. Currently all site content is supported. To select the content you want to feature in your teaser, just start typing the name of the item. 
• Headline (optional). The headline will appear above the items you have selected, in a large font. This allows you to give some context about the items you are displaying with the Teaser Paragraph. For example "Related Programs" or "Featured Publications."
• Description (optional). The description will appear below the headline and above the content item(s).

• Button Link (Optional): The button is displayed beneath your selected content item(s). The button link can be used to prompt site visitors to go to a page related to the Teaser items. For example, "See all events."

See example Teasers.

Note: See Comparing Teaser and Lists for more use cases for Teasers and a comparison between the Teaser and Lists Paragraph.

Customizing the display

Teasers inherit their content and display from the items you have selected. This means that to edit the content of the teaser itself, you must go to the source. For example, if you select an event, the teaser card will use the default event display and the title will match the title of the event. If the title of your selected content changes, the teaser card for that content will update automatically.

News, Events, and other structured content types take the description on the teaser card from the Body or Body Content field, and for some content types, the Featured Image field. For Basic Pages, the teaser image and description are drawn from the Page Metadata.

Reordering teasers

 You can reorder your teasers in the Teaser Paragraph by using the Move tool to drag them into your preferred order.

Teaser examples

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

News Teaser:

Event Teaser:

Person Teaser:

Teaser with two news items:

Teaser with an event, a person, and a 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.