Teaser_v1

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.

Technical Documentation

GitHub

Using Core Components

Adobe Help Center

Examples

Title and Description

Teaser with a title and description.

Teaser Title

Teaser Description

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        jcr:title:
        Teaser Title
    

        actionsEnabled:
        false
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        false
    

        jcr:description:
        <p>Teaser Description</p>

    

        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]
    

        descriptionFromPage:
        false
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
    

        
    
        Teaser Title
    

        
    Teaser Description


    JSON

Image, Title and Description

Teaser with an image, title and description.

Teaser Title

Teaser Description

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        jcr:title:
        Teaser Title
    

        fileReference:
        /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
    

        actionsEnabled:
        false
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        false
    

        jcr:description:
        <p>Teaser Description</p>

    

        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]
    

        descriptionFromPage:
        false
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
            
            
            
        
    
    
    


    



    
        
    

        
    
        Teaser Title
    

        
    Teaser Description


    JSON

Linked

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

Linked Teaser

Teaser Description

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        jcr:title:
        Linked Teaser
    

        fileReference:
        /content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg
    

        actionsEnabled:
        false
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        false
    

        linkURL:
        /content/core-components-examples/library/teaser
    

        jcr:description:
        <p>Teaser Description</p>

    

        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]
    

        descriptionFromPage:
        false
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
            
            
            
        
    
    
    


    



    
        
    

        
    
        Linked Teaser
    

        
    Teaser Description


    JSON

Call To Action Button

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

Teaser Title

Teaser Description

Call To Action

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        jcr:title:
        Teaser Title
    

        fileReference:
        /content/dam/core-components-examples/library/sample-assets/mountain-range.jpg
    

        actionsEnabled:
        true
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        false
    

        jcr:description:
        <p>Teaser Description</p>

    

        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]
    

        descriptionFromPage:
        false
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
            
            
            
        
    
    
    


    



    
        
    

        
    
        Teaser Title
    

        
    Teaser Description


        
    
        
    Call To Action


    JSON

Multiple Call To Action Buttons

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

Teaser Title

Teaser Description

Call To Action Call To Action

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        jcr:title:
        Teaser Title
    

        fileReference:
        /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
    

        actionsEnabled:
        true
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        false
    

        jcr:description:
        <p>Teaser Description</p>

    

        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]
    

        descriptionFromPage:
        false
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
            
            
            
        
    
    
    


    



    
        
    

        
    
        Teaser Title
    

        
    Teaser Description


        
    
        
    Call To Action

    
        
    Call To Action


    JSON

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

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        jcr:createdBy:
        admin
    

        actionsEnabled:
        false
    

        jcr:lastModifiedBy:
        admin
    

        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]
    

        titleFromPage:
        true
    

        linkURL:
        /content/core-components-examples/library/teaser
    

        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]
    

        descriptionFromPage:
        true
    

        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    

        textIsRich:
        true

    
        

    

    
    

    
        
    

        
    
        Teaser
    

        
    Link an image and text


    JSON

Teaserv1

Examples

Title and Description

Teaser Title

Teaser Title

Image, Title and Description

Teaser Title

Teaser Title

Linked

Call To Action Button

Multiple Call To Action Buttons

Title and Description from Linked Page

Teaser_v1