Experience Fragment

Experience Fragment allows an experience fragment variation to be presented on a page.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Experience Fragment component with an associated experience fragment variation that is composed of a Text and Image component.

Result

Lava forming some rock.

Gray lava rock formation
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
fragmentVariationPath: /content/experience-fragments/core-components-examples/library/simple-experience-fragment/master
jcr:created:
jcr:lastModified:
sling:resourceType: core/wcm/components/experiencefragment/v1/experiencefragment
Markup:
<div class="experiencefragment">
  <div id="experiencefragment-fe1a326f86" class="cmp-experiencefragment cmp-experiencefragment--simple-experience-fragment">
    <div class="xf-content-height">
      <div class="root responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="text aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-data-layer="{&quot;text-cda7d0867d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-07-17T13:17:32Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lava forming some rock.</p>\r\n&quot;}}" id="text-cda7d0867d" class="cmp-text">
              <p>Lava forming some rock.</p>
            </div>
          </div>
          <div class="image aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-lazythreshold="0" data-cmp-src="/content/experience-fragments/core-components-examples/library/simple-experience-fragment/master/_jcr_content/root/image.coreimg{.width}.jpeg/1563369501810/lava-rock-formation.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg" data-asset-id="c58c09f6-e382-4698-bfbd-e8c8d37712c8" data-title="Gray lava rock formation" id="image-83bac327b9" data-cmp-data-layer="{&quot;image-83bac327b9&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-07-17T13:18:21Z&quot;,&quot;dc:title&quot;:&quot;Gray lava rock formation&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c58c09f6-e382-4698-bfbd-e8c8d37712c8&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:38Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-rock-formation.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/experience-fragments/core-components-examples/library/simple-experience-fragment/master/_jcr_content/root/image.coreimg.jpeg/1563369501810/lava-rock-formation.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="Gray lava rock formation">
              <meta itemprop="caption" content="Gray lava rock formation">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"localizedFragmentVariationPath":"\/content\/experience-fragments\/core-components-examples\/library\/simple-experience-fragment\/master\/jcr:content","configured":true,":itemsOrder":["root"],":items":{"root":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--12","text":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["text","image"],":items":{"text":{"id":"text-39a42f5799","text":"<p>Lava forming some rock.<\/p>\r\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-39a42f5799":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-07-17T13:17:32Z","xdm:text":"<p>Lava forming some rock.<\/p>\r\n"}}},"image":{"id":"image-9139a00e91","alt":"Gray lava rock formation","title":"Gray lava rock formation","src":"\/content\/experience-fragments\/core-components-examples\/library\/simple-experience-fragment\/master\/_jcr_content\/root\/image.coreimg.jpeg\/1563369501810\/lava-rock-formation.jpeg","srcUriTemplate":"\/content\/experience-fragments\/core-components-examples\/library\/simple-experience-fragment\/master\/_jcr_content\/root\/image.coreimg{.width}.jpeg\/1563369501810\/lava-rock-formation.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-9139a00e91":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2019-07-17T13:18:21Z","dc:title":"Gray lava rock formation","image":{"repo:id":"c58c09f6-e382-4698-bfbd-e8c8d37712c8","repo:modifyDate":"2019-02-20T14:21:38Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-rock-formation.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}},":type":"wcm\/foundation\/components\/responsivegrid"}},"classNames":"aem-xf",":type":"core\/wcm\/components\/experiencefragment\/v1\/experiencefragment"}
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 *