Teaserv1

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

Title and Description

Teaser with a title and description.

Teaser Title

Teaser Description

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:title: Teaser Title
  4. actionsEnabled: false
  5. jcr:lastModifiedBy: admin
  6. jcr:created: java.util.GregorianCalendar[time=1544186194343,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=34,MILLISECOND=343,ZONE_OFFSET=3600000,DST_OFFSET=0]
  7. titleFromPage: false
  8. jcr:description: <p>Teaser Description</p>
  9. jcr:lastModified: java.util.GregorianCalendar[time=1544186277049,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=37,SECOND=57,MILLISECOND=49,ZONE_OFFSET=3600000,DST_OFFSET=0]
  10. descriptionFromPage: false
  11. sling:resourceType: core/wcm/components/teaser/v1/teaser
  12. textIsRich: true
    
        

    

Teaser Title

Teaser Description

Image, Title and Description

Teaser with an image, title and description.

Lava flowing into the ocean

Teaser Title

Teaser Description

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:title: Teaser Title
  4. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
  5. actionsEnabled: false
  6. jcr:lastModifiedBy: admin
  7. jcr:created: java.util.GregorianCalendar[time=1544186197955,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=37,MILLISECOND=955,ZONE_OFFSET=3600000,DST_OFFSET=0]
  8. titleFromPage: false
  9. jcr:description: <p>Teaser Description</p>
  10. jcr:lastModified: java.util.GregorianCalendar[time=1544186328047,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=38,SECOND=48,MILLISECOND=47,ZONE_OFFSET=3600000,DST_OFFSET=0]
  11. descriptionFromPage: false
  12. sling:resourceType: core/wcm/components/teaser/v1/teaser
  13. textIsRich: true
    
        

    
Lava flowing into the ocean

Teaser Title

Teaser Description

Linked

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

Linked Teaser

Teaser Description

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:title: Linked Teaser
  4. fileReference: /content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg
  5. actionsEnabled: false
  6. jcr:lastModifiedBy: admin
  7. jcr:created: java.util.GregorianCalendar[time=1544186200747,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=40,MILLISECOND=747,ZONE_OFFSET=3600000,DST_OFFSET=0]
  8. titleFromPage: false
  9. linkURL: /content/core-components-examples/library/teaser
  10. jcr:description: <p>Teaser Description</p>
  11. jcr:lastModified: java.util.GregorianCalendar[time=1544186386887,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=39,SECOND=46,MILLISECOND=887,ZONE_OFFSET=3600000,DST_OFFSET=0]
  12. descriptionFromPage: false
  13. sling:resourceType: core/wcm/components/teaser/v1/teaser
  14. 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:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:title: Teaser Title
  4. fileReference: /content/dam/core-components-examples/library/sample-assets/mountain-range.jpg
  5. actionsEnabled: true
  6. jcr:lastModifiedBy: admin
  7. jcr:created: java.util.GregorianCalendar[time=1544186204171,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=44,MILLISECOND=171,ZONE_OFFSET=3600000,DST_OFFSET=0]
  8. titleFromPage: false
  9. jcr:description: <p>Teaser Description</p>
  10. jcr:lastModified: java.util.GregorianCalendar[time=1544186560613,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=42,SECOND=40,MILLISECOND=613,ZONE_OFFSET=3600000,DST_OFFSET=0]
  11. descriptionFromPage: false
  12. sling:resourceType: core/wcm/components/teaser/v1/teaser
  13. 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:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:title: Teaser Title
  4. fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
  5. actionsEnabled: true
  6. jcr:lastModifiedBy: admin
  7. jcr:created: java.util.GregorianCalendar[time=1544186204171,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=44,MILLISECOND=171,ZONE_OFFSET=3600000,DST_OFFSET=0]
  8. titleFromPage: false
  9. jcr:description: <p>Teaser Description</p>
  10. jcr:lastModified: java.util.GregorianCalendar[time=1544186529489,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=42,SECOND=9,MILLISECOND=489,ZONE_OFFSET=3600000,DST_OFFSET=0]
  11. descriptionFromPage: false
  12. sling:resourceType: core/wcm/components/teaser/v1/teaser
  13. textIsRich: true

Title and Description from Linked Page

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

Teaser

Link an image and text
  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. actionsEnabled: false
  4. jcr:lastModifiedBy: admin
  5. jcr:created: java.util.GregorianCalendar[time=1544186211442,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=36,SECOND=51,MILLISECOND=442,ZONE_OFFSET=3600000,DST_OFFSET=0]
  6. titleFromPage: true
  7. linkURL: /content/core-components-examples/library/teaser
  8. jcr:lastModified: java.util.GregorianCalendar[time=1544186596319,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=43,SECOND=16,MILLISECOND=319,ZONE_OFFSET=3600000,DST_OFFSET=0]
  9. descriptionFromPage: true
  10. sling:resourceType: core/wcm/components/teaser/v1/teaser
  11. textIsRich: true
    
        

    

Teaser

Link an image and text