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.

The Related Topics that appear at the bottom of most User Guide pages, including this one, are built using the Teaser Paragraph.

About Teasers

 A Teaser is made up of the following fields and settings:

Content Item(s)

This field lets you select 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 and select it from the list. 
• To add each additional item to your Teaser, select Add another item.
• You can select content of a single type (all News) or mix and match (News, People, Events, etc.) 
• The title for each Content Item will display as a Heading 2 (h2) or an Heading 3 (h3) depending on if you have a Headline.

Headline

It is recommended that you provide a headline. This allows you to give some context about the items you are displaying with the Teaser Paragraph. For example "Related Programs" or "Featured Publications." This field is displayed as a Heading 2 (h2) by default, but this behavior can be changed in the Behavior/Styles settings.

Description (optional). 

The Description is an optional field. It will appear below the Headline and above the Content Item(s). The Description field supports Minimal HTML.

Button Link 

The Button Link is an optional field. The Button Link is displayed centered 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 more events."

The Button Link field uses the same pattern as other link fields on Stanford Sites. It is comprised of two elements:

• URL. A link to an internal page or an external page. To link to an internal page, just start typing the name of the page you wish to link to and select it from the list. To link to an external page, enter the entire URL, starting with "https://."  Note: this field does not support mailto: links.
• Link Text. The text for the button/action link. Add text that describes the purpose of following the link. 

Styles/Behaviors

The following are settings that control the behavior of Teaser Paragraph Headline.

Display heading: Recommended - This displays the Headline as an H2. This is the default setting.

Visually hide heading: This keeps the Headline in the page structure as an H2, but hides it in the display. This is appropriate if you wish to provide additional context for assistive technologies and search engines/

Remove heading: This completely removes the Headline from the page and assumes you have placed an H2 on the page above this paragraph. Used incorrectly, removing the Headline can create an accessibility issue.

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

Teaser 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.