Separator & Spaces

The separator is a useful tool to get the precise spacing between elements within the page. AIDA has three different sizes:

- Inside Component (Green): 32px Height.

- Between Blocks (Purple): 72px Height.

- Between Sections (Red): 96px Height on large and small screens .

Please refer to the design specifications to use the appropriate one. The most used is the red separator which is used between each component.

Important:
Colors and Labels are visible in Edit mode only.

Examples

Inside a Component 

    
    

    
  1. 
        sling:resourceType:
        aida-component-library/core/components/content/separator
    
    2. 

    
  2. 
        cq:styleIds:
        1640262017605
    
    3. 



    
        

    



    




    

    


    JSON

Between Blocks 

    
    

    
  1. 
        sling:resourceType:
        aida-component-library/core/components/content/separator
    
    2. 

    
  2. 
        cq:styleIds:
        1640694690680
    
    3. 



    
        

    



    




    

    


    JSON

Between Sections 

    
    

    
  1. 
        sling:resourceType:
        aida-component-library/core/components/content/separator
    
    2. 

    
  2. 
        cq:styleIds:
        1640262107392
    
    3. 



    
        

    



    




    

    


    JSON

Built with Core Components 2.27.0.