Teaserv2

Teaser allows the grouping of an image, title and description for promoting and linking to site content sections. One or more actions can also be defined.

Using Core Components

Adobe Help Center

Examples

Pretitle, Title and Description

Teaser with a pretitle, title and description.

Pretitle

Teaser Title

Teaser Description

  1. jcr:title: Teaser Title
  2. actionsEnabled: false
  3. pretitle: Pretitle
  4. titleFromPage: false
  5. jcr:description: <p>Teaser Description</p>
  6. descriptionFromPage: false
  7. sling:resourceType: core-components-examples/components/teaser
  8. textIsRich: true
    
        

    
Pretitle

Teaser Title

Teaser Description

Image, Pretitle, Title and Description

Teaser with an image, pretitle, title and description.

Lava flowing into the ocean
Pretitle

Teaser Title

Teaser Description

  1. jcr:title: Teaser Title
  2. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  3. actionsEnabled: false
  4. pretitle: Pretitle
  5. titleFromPage: false
  6. jcr:description: <p>Teaser Description</p>
  7. descriptionFromPage: false
  8. sling:resourceType: core-components-examples/components/teaser
  9. textIsRich: true
    
        

    
Lava flowing into the ocean
Pretitle

Teaser Title

Teaser Description

Linked

Teasers can be linked to internal relative AEM resources or external absolute URLs.

Linked Teaser

Teaser Description

  1. jcr:title: Linked Teaser
  2. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg
  3. actionsEnabled: false
  4. titleFromPage: false
  5. linkURL: /content/core-components-examples/library/page-authoring/teaser
  6. jcr:description: <p>Teaser Description</p>
  7. descriptionFromPage: false
  8. sling:resourceType: core-components-examples/components/teaser
  9. textIsRich: true
    
        

    

Linked Teaser

Teaser Description

Call To Action Button

Teaser with an image, title, description and call-to-action button.

Aerial photo of mountain range

Teaser Title

Teaser Description

  1. jcr:title: Teaser Title
  2. fileReference: /content/dam/core-components-examples/library/sample-assets/mountain-range.jpg
  3. actionsEnabled: true
  4. titleFromPage: false
  5. jcr:description: <p>Teaser Description</p>
  6. descriptionFromPage: false
  7. sling:resourceType: core-components-examples/components/teaser
  8. textIsRich: true
    
        

    
Aerial photo of mountain range

Teaser Title

Teaser Description

Multiple Call To Action Buttons

Teaser with an image, title, description and multiple call-to-action buttons, each with a different link.

  1. jcr:title: Teaser Title
  2. fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
  3. actionsEnabled: true
  4. titleFromPage: false
  5. jcr:description: <p>Teaser Description</p>
  6. descriptionFromPage: false
  7. sling:resourceType: core-components-examples/components/teaser
  8. textIsRich: true

Title, Description and Image from Linked Page

Teaser with an image, title, description and link - with the image, title and description taken from the linked page.

Image

Display an image asset
  1. actionsEnabled: false
  2. titleFromPage: true
  3. linkURL: /content/core-components-examples/library/page-authoring/image
  4. descriptionFromPage: true
  5. sling:resourceType: core-components-examples/components/teaser
  6. textIsRich: true
    
        

    

Image

Display an image asset