Teaser groups an image or icon, pretitle, title, and description for promoting content or linking to pages.

For general information about the Teaser Core Component, refer to AEM's Teaser Component documentation.

On this page

Styles

Styles

Banner

Teaser banners are containers for organizing related content and actions. Banners are generally used as callouts or summaries to bring the user to more detailed information and is paired with a larger image than a card.

Card

Teaser cards are containers for organizing related content and actions. Cards are generally used as callouts or summaries to bring the user to more detailed information.

Hero

Teaser heroes are containers for emphasizing promotional or important content. Heroes generally live at the top of the page and usually contain a header, call-to-action, and description. Heroes can also be used as in-page banners.

Page header

Teaser page headers are containers for showing a page title without a hero image. Page headers are only allowed at the top of the page below the breadcrumbs and must contain a page title. Page headers can also contain an optional section header.