Hero Teaser

Short Description:

The Hero Teaser component is currently planned for the Parking and Insurance page but will be used on other pages as well.  It will be displayed at the top of the page (first). 

Marketing purpose:

To directly convey to the user what the page is about and create a desire to interact with the page.

 

Edit Teaser

Hero Teaser doesn't use pre-title. Hero teaser should have an H1 heading. You can select it with the Title Type select box.

Edit Hero

 

Container

The hero teaser is designed to span the full width of the view-port, that is, it doesn't fit inside the basic grid but extends beyond it. For it to work properly, you need to put it inside a container with the "Large Hero" style. In this list of components, the hero teaser is not inside the container, that's why the texts do not have a left margin but go to the left edge of the image. That is normal. The space will be displayed when the teaser is inside the container with the style mentioned above.

 

Responsive Images

Sometimes it is possible that the image works well in both cases: mobile and desktop, if the point of interest of the image is in the center, but when it is not, a workaround can be done: the workaround for this is to create a copy of the same hero teaser and assign one Teaser for desktop and one for mobile. Each version must be activated only in the corresponding viewport: mobile only in mobile and desktop only in desktop. You can see an example of this on the demo page we've made:

Demo Page

 

Text position at the BOTTOM

An- & Abreise mit dem Auto Parkplatz ab 19€ pro Tag 

    
    

    
  1. 
        titleType:
        h1
    
    2. 

    
  2. 
        jcr:title:
        An- & Abreise mit dem Auto,Parkplatz ab 19€ pro Tag
    
    3. 

    
  3. 
        imageFromPageImage:
        false
    
    4. 

    
  4. 
        fileReference:
        /content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-1.png
    
    5. 

    
  5. 
        actionsEnabled:
        false
    
    6. 

    
  6. 
        titleFromPage:
        false
    
    7. 

    
  7. 
        descriptionFromPage:
        false
    
    8. 

    
  8. 
        sling:resourceType:
        aida-component-library/core/components/content/teaser
    
    9. 

    
  9. 
        isDecorative:
        false
    
    10. 

    
  10. 
        textIsRich:
        true
    
    11. 

    
  11. 
        altValueFromDAM:
        true
    
    12. 

    
  12. 
        cq:styleIds:
        1638263807813
    
    13. 



    
        

    




    

    
        

            
    

            
  


    
      An- & Abreise mit dem Auto
    
      Parkplatz ab 19€ pro Tag
    

    
  


            
    

            
    

        


        
            
    



    
        
    
    
    



    




        

    

    



    




    

    


    JSON

Text position at the TOP

AIDA Reiseschutz ab 49€ pro Person

Hero Teaser 
    
    

    
  1. 
        titleType:
        h1
    
    2. 

    
  2. 
        jcr:title:
        AIDA Reiseschutz,ab 49€ pro Person
    
    3. 

    
  3. 
        imageFromPageImage:
        false
    
    4. 

    
  4. 
        fileReference:
        /content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-2.png
    
    5. 

    
  5. 
        actionsEnabled:
        true
    
    6. 

    
  6. 
        titleFromPage:
        false
    
    7. 

    
  7. 
        descriptionFromPage:
        false
    
    8. 

    
  8. 
        sling:resourceType:
        aida-component-library/core/components/content/teaser
    
    9. 

    
  9. 
        isDecorative:
        false
    
    10. 

    
  10. 
        textIsRich:
        true
    
    11. 

    
  11. 
        altValueFromDAM:
        true
    
    12. 

    
  12. 
        cq:styleIds:
        1638271652476
    
    13. 



    
        

    




    

    
        

            
    

            
  


    
      AIDA Reiseschutz
    
      ab 49€ pro Person
    

    
  


            
    

            
    

        

    

    
        Hero Teaser
    

    

    


        


        
            
    



    
        
    
    
    



    




        

    

    



    




    

    


    JSON

Built with Core Components 2.27.0.