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.

Examples

Pretitle, Title and Description

Teaser with a pretitle, title and description.

Pretitle

Teaser Title

Teaser Description

    
    

    
  1. 
        jcr:title:
        Teaser Title
    
    2. 

    
  2. 
        actionsEnabled:
        false
    
    3. 

    
  3. 
        pretitle:
        Pretitle
    
    4. 

    
  4. 
        titleFromPage:
        false
    
    5. 

    
  5. 
        jcr:description:
        <p>Teaser Description</p>
    
    6. 

    
  6. 
        descriptionFromPage:
        false
    
    7. 

    
  7. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    8. 

    
  8. 
        textIsRich:
        true
    
    9. 



    
        

    



    
        

            
    
Pretitle


            
    

        Teaser Title
    


            
    
Teaser Description


            
    

        

        
    

    



    




    

    


    JSON

Image, Pretitle, Title and Description

Teaser with an image, pretitle, title and description.

Pretitle

Teaser Title

Teaser Description

Lava flowing into the ocean 
    
    

    
  1. 
        jcr:title:
        Teaser Title
    
    2. 

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

    
  3. 
        actionsEnabled:
        false
    
    4. 

    
  4. 
        pretitle:
        Pretitle
    
    5. 

    
  5. 
        titleFromPage:
        false
    
    6. 

    
  6. 
        jcr:description:
        <p>Teaser Description</p>
    
    7. 

    
  7. 
        descriptionFromPage:
        false
    
    8. 

    
  8. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    9. 

    
  9. 
        textIsRich:
        true
    
    10. 



    
        

    



    
        

            
    
Pretitle


            
    

        Teaser Title
    


            
    
Teaser Description


            
    

        

        
    



    
        Lava flowing into the ocean
    
    
    



    




    



    




    

    


    JSON

Linked

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

    
    

    
  1. 
        jcr:title:
        Linked Teaser
    
    2. 

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

    
  3. 
        actionsEnabled:
        false
    
    4. 

    
  4. 
        titleFromPage:
        false
    
    5. 

    
  5. 
        linkURL:
        /content/core-components-examples/library/core-content/teaser
    
    6. 

    
  6. 
        jcr:description:
        <p>Teaser Description</p>
    
    7. 

    
  7. 
        descriptionFromPage:
        false
    
    8. 

    
  8. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    9. 

    
  9. 
        textIsRich:
        true
    
    10. 



    
        

    



    




    

    


    JSON

Call To Action Button

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

Teaser Title

Teaser Description

Call To Action
Aerial photo of mountain range 
    
    

    
  1. 
        jcr:title:
        Teaser Title
    
    2. 

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

    
  3. 
        actionsEnabled:
        true
    
    4. 

    
  4. 
        titleFromPage:
        false
    
    5. 

    
  5. 
        jcr:description:
        <p>Teaser Description</p>
    
    6. 

    
  6. 
        descriptionFromPage:
        false
    
    7. 

    
  7. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    8. 

    
  8. 
        textIsRich:
        true
    
    9. 



    
        

    



    
        

            
    

            
    

        Teaser Title
    


            
    
Teaser Description


            
    

        
    Call To Action

    


        

        
    



    
        Aerial photo of mountain range
    
    
    



    




    



    




    

    


    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
Snowy mountain glacier 
    
    

    
  1. 
        jcr:title:
        Teaser Title
    
    2. 

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

    
  3. 
        actionsEnabled:
        true
    
    4. 

    
  4. 
        titleFromPage:
        false
    
    5. 

    
  5. 
        jcr:description:
        <p>Teaser Description</p>
    
    6. 

    
  6. 
        descriptionFromPage:
        false
    
    7. 

    
  7. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    8. 

    
  8. 
        textIsRich:
        true
    
    9. 



    
        

    



    
        

            
    

            
    

        Teaser Title
    


            
    
Teaser Description


            
    

        
    Call To Action

    
        
    Call To Action

    


        

        
    



    
        Snowy mountain glacier
    
    
    



    




    



    




    

    


    JSON

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.

    
    

    
  1. 
        actionsEnabled:
        false
    
    2. 

    
  2. 
        titleFromPage:
        true
    
    3. 

    
  3. 
        linkURL:
        /content/core-components-examples/library/core-content/image
    
    4. 

    
  4. 
        descriptionFromPage:
        true
    
    5. 

    
  5. 
        sling:resourceType:
        core-components-examples/components/teaser
    
    6. 

    
  6. 
        textIsRich:
        true
    
    7. 



    
        

    



    




    

    


    JSON

Built with Core Components 2.27.0.