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.

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.

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.

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.

Built with Core Components 2.28.0.