Content Fragment

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

Github URL
Adobe URL
Source URL
Title
Standard
Content

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.

Result

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.

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
paragraphScope: all
jcr:lastModifiedBy: admin
jcr:created:
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.
variationName: master
jcr:lastModified:
sling:resourceType: core/wcm/components/contentfragment/v1/contentfragment
displayMode: multi
fragmentPath: /content/dam/core-components-examples/library/sample-assets/simple-fragment
Markup:
<div class="contentfragment">
  <article id="contentfragment-515d2322fb" class="cmp-contentfragment cmp-contentfragment--simple-fragment" data-cmp-contentfragment-model="/content/dam/core-components-examples/library/sample-assets/simple-fragment/jcr:content/model" data-cmp-data-layer="{&quot;contentfragment-515d2322fb&quot;:{&quot;@type&quot;:&quot;core/wcm/components/contentfragment/v1/contentfragment&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-15T14:28:41Z&quot;,&quot;dc:title&quot;:&quot;Simple Fragment&quot;,&quot;elements&quot;:[{&quot;xdm:title&quot;:&quot;Main&quot;,&quot;xdm:text&quot;:&quot;<h2>Lorem Ipsum</h2>\n<p>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.</p>\n&quot;}]}}" data-cmp-contentfragment-path="/content/dam/core-components-examples/library/sample-assets/simple-fragment">
    <h3 class="cmp-contentfragment__title">Simple Fragment</h3>
    <dl class="cmp-contentfragment__elements">
      <div class="cmp-contentfragment__element cmp-contentfragment__element--main" data-cmp-contentfragment-element-type="string">
        <dt class="cmp-contentfragment__element-title">Main</dt>
        <dd class="cmp-contentfragment__element-value">
          <h2>Lorem Ipsum</h2>
          <p>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.</p>
        </dd>
      </div>
    </dl>
  </article>
</div>
JSON:
{"id":"contentfragment-515d2322fb","description":"","title":"Simple Fragment","elements":{"main":{"title":"Main","dataType":"string","value":"<h2>Lorem Ipsum<\/h2>\n<p>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.<\/p>\n",":type":"text\/html","multiValue":false}},"elementsOrder":["main"],":itemsOrder":["par2"],":items":{"par2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid"}},":type":"core\/wcm\/components\/contentfragment\/v1\/contentfragment","model":"\/content\/dam\/core-components-examples\/library\/sample-assets\/simple-fragment\/jcr:content\/model","dataLayer":{"contentfragment-515d2322fb":{"@type":"core\/wcm\/components\/contentfragment\/v1\/contentfragment","repo:modifyDate":"2019-01-15T14:28:41Z","dc:title":"Simple Fragment","elements":[{"xdm:title":"Main","xdm:text":"<h2>Lorem Ipsum<\/h2>\n<p>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.<\/p>\n"}]}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *