AEM Core Components

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.

GitHub

Technical Documentation

GitHub

Adobe

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. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:title:
        Teaser Title
    
    4. 

  4. 
        actionsEnabled:
        false
    
    5. 

  5. 
        jcr:lastModifiedBy:
        admin
    
    6. 

  6. 
        jcr:created:
        
    
    7. 

  7. 
        titleFromPage:
        false
    
    8. 

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

    
    9. 

  9. 
        jcr:lastModified:
        
    
    10. 

  10. 
        descriptionFromPage:
        false
    
    11. 

  11. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    12. 

  12. 
        textIsRich:
        true
    
    13. 




    
        

    


    
    

    

        
    

        Teaser Title
    


        
    
Teaser Description




        
    

    




    


    

    


    JSON

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. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:title:
        Teaser Title
    
    4. 

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

  5. 
        actionsEnabled:
        false
    
    6. 

  6. 
        jcr:lastModifiedBy:
        admin
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        titleFromPage:
        false
    
    9. 

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

    
    10. 

  10. 
        jcr:lastModified:
        
    
    11. 

  11. 
        descriptionFromPage:
        false
    
    12. 

  12. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    13. 

  13. 
        textIsRich:
        true
    
    14. 




    
        

    


    
    



    
        
            
            Lava flowing into the ocean
            
        
    
    
    



    



    

        
    

        Teaser Title
    


        
    
Teaser Description




        
    

    




    


    

    


    JSON

Linked

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

Gray lava rock formation

Linked Teaser

Teaser Description

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:title:
        Linked Teaser
    
    4. 

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

  5. 
        actionsEnabled:
        false
    
    6. 

  6. 
        jcr:lastModifiedBy:
        admin
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        titleFromPage:
        false
    
    9. 

  9. 
        linkURL:
        /content/core-components-examples/library/teaser
    
    10. 

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

    
    11. 

  11. 
        jcr:lastModified:
        
    
    12. 

  12. 
        descriptionFromPage:
        false
    
    13. 

  13. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    14. 

  14. 
        textIsRich:
        true
    
    15. 




    
        

    


    
    



    
        
            
            Gray lava rock formation
            
        
    
    
    



    



    

        
    

        Linked Teaser
    


        
    
Teaser Description




        
    

    




    


    

    


    JSON

Call To Action Button

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

Aerial photo of mountain range

Teaser Title

Teaser Description

Call To Action 
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:title:
        Teaser Title
    
    4. 

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

  5. 
        actionsEnabled:
        true
    
    6. 

  6. 
        jcr:lastModifiedBy:
        admin
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        titleFromPage:
        false
    
    9. 

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

    
    10. 

  10. 
        jcr:lastModified:
        
    
    11. 

  11. 
        descriptionFromPage:
        false
    
    12. 

  12. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    13. 

  13. 
        textIsRich:
        true
    
    14. 




    
        

    


    
    



    
        
            
            Aerial photo of mountain range
            
        
    
    
    



    



    

        
    

        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.

Snowy mountain glacier

Teaser Title

Teaser Description

Call To Action Call To Action 
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:title:
        Teaser Title
    
    4. 

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

  5. 
        actionsEnabled:
        true
    
    6. 

  6. 
        jcr:lastModifiedBy:
        admin
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        titleFromPage:
        false
    
    9. 

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

    
    10. 

  10. 
        jcr:lastModified:
        
    
    11. 

  11. 
        descriptionFromPage:
        false
    
    12. 

  12. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    13. 

  13. 
        textIsRich:
        true
    
    14. 




    
        

    


    
    



    
        
            
            Snowy mountain glacier
            
        
    
    
    



    



    

        
    

        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
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        actionsEnabled:
        false
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        jcr:created:
        
    
    6. 

  6. 
        titleFromPage:
        true
    
    7. 

  7. 
        linkURL:
        /content/core-components-examples/library/teaser
    
    8. 

  8. 
        jcr:lastModified:
        
    
    9. 

  9. 
        descriptionFromPage:
        true
    
    10. 

  10. 
        sling:resourceType:
        core/wcm/components/teaser/v1/teaser
    
    11. 

  11. 
        textIsRich:
        true
    
    12. 




    
        

    


    
    

    

        
    

        Teaser
    


        
    
Link an image and text


        
    

    




    


    

    


    JSON

Built with Core Components 2.3.0.