Content Fragmentv1

Content Fragment allows a content fragment asset, its elements and variations to be presented on a page.

Examples

Standard

Content fragment component with an associated content fragment asset. The asset uses the Simple Fragment model and displays some dummy article content, including a header and paragraph. It has one Main element.

Simple Fragment

Main

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

    
    

    
  1. 
        paragraphScope:
        all
    
    2. 

    
  2. 
        text:
        Main Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.
    
    3. 

    
  3. 
        variationName:
        master
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/contentfragment
    
    5. 

    
  5. 
        displayMode:
        multi
    
    6. 

    
  6. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/simple-fragment
    
    7. 



    
        

    


    
    

        
Simple Fragment

        

        
        
            
    

        
    

        
Main

        

            
            
            
Lorem Ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.


        

    


    


        
    





    




    

    


    JSON

Variations

It is possible to output alternative variations on the page. Here we use the same simple content fragment asset, but instead display its Short variation. Short variations are more suited to mobile apps, for example.

Simple Fragment

Main

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    
    

    
  1. 
        paragraphScope:
        all
    
    2. 

    
  2. 
        text:
        Main Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    3. 

    
  3. 
        variationName:
        short
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/contentfragment
    
    5. 

    
  5. 
        displayMode:
        multi
    
    6. 

    
  6. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/simple-fragment
    
    7. 



    
        

    


    
    

        
Simple Fragment

        

        
        
            
    

        
    

        
Main

        

            
            
            
Lorem Ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


        

    


    


        
    





    




    

    


    JSON

Structured Content Fragment

In this example, the asset is based on a bespoke Office  model which allows the output of structured data associated with a business location or office.

Adobe Headquarters

Title
Adobe Headquarters
Street Address
345 Park Avenue
City
San Jose
Postal Code
95110-2704
Country
USA
Region
core-components-examples:region/north-america 
    
    

    
  1. 
        paragraphScope:
        all
    
    2. 

    
  2. 
        variationName:
        master
    
    3. 

    
  3. 
        sling:resourceType:
        core-components-examples/components/contentfragment
    
    4. 

    
  4. 
        displayMode:
        multi
    
    5. 

    
  5. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/adobe-headquarters
    
    6. 



    
        

    


    
    

        
Adobe Headquarters

        

        
        
            
    

        
    

        
Title

        

            
            
            Adobe Headquarters
        

    


    
        
    

        
Street Address

        

            
            
            345 Park Avenue
        

    


    
        
    

        
City

        

            
            
            San Jose
        

    


    
        
    

        
Postal Code

        

            
            
            95110-2704
        

    


    
        
    

        
Country

        

            
            
            USA
        

    


    
        
    

        
Region

        

            
            
            core-components-examples:region/north-america
        

    


    


        
    





    




    

    


    JSON

Elements

For structured content fragments, it is possible to limit the output to certain elements in the data. In this example we again show the same office, but only its title and city.

Adobe Headquarters

Title
Adobe Headquarters
City
San Jose 
    
    

    
  1. 
        paragraphScope:
        all
    
    2. 

    
  2. 
        elementNames:
        title,city
    
    3. 

    
  3. 
        variationName:
        master
    
    4. 

    
  4. 
        sling:resourceType:
        core-components-examples/components/contentfragment
    
    5. 

    
  5. 
        displayMode:
        multi
    
    6. 

    
  6. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/adobe-headquarters
    
    7. 



    
        

    


    
    

        
Adobe Headquarters

        

        
        
            
    

        
    

        
Title

        

            
            
            Adobe Headquarters
        

    


    
        
    

        
City

        

            
            
            San Jose
        

    


    


        
    





    




    

    


    JSON

Built with Core Components 2.27.0.