Content Fragment List

Content Fragment List allows the display of a list of content fragments on a page. Useful for authoring headless content that can be easily consumed by applications.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Content fragment list component that displays content fragments based on a bespoke Office model which allows the output of structured data associated with a business location or office. A Parent Path is used as a root for looking up the content fragments to display.

Result

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

Adobe San Francisco

Title
Adobe San Francisco
Street Address
601 Townsend Street
City
San Francisco
Postal Code
94103
Country
USA
Region
core-components-examples:region/north-america

Adobe Research Schweiz AG

Title
Adobe Research Schweiz AG
Street Address
Barfüsserplatz 6
City
Basel
Postal Code
CH-4051
Country
Switzerland
Region
core-components-examples:region/europe-middleeast-africa
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
modelPath: /conf/core-components-examples/settings/dam/cfm/models/office
jcr:lastModifiedBy: admin
jcr:created:
parentPath: /content/dam/core-components-examples/library/sample-assets
jcr:lastModified:
sling:resourceType: core/wcm/components/contentfragmentlist/v1/contentfragmentlist
Markup:
<div class="contentfragmentlist">
  <section id="contentfragmentlist-c68b7fe57c" class="cmp-contentfragmentlist">
    <article class="cmp-contentfragment cmp-contentfragment--adobe-headquarters" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Headquarters</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Headquarters </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 345 Park Avenue </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Jose </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 95110-2704 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-san-francisco" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe San Francisco</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 601 Townsend Street </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 94103 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-basel" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Research Schweiz AG</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Research Schweiz AG </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> Barfüsserplatz 6 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> Basel </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> CH-4051 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> Switzerland </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/europe-middleeast-africa </dd>
        </div>
      </dl>
    </article>
  </section>
</div>
JSON:
{":type":"core\/wcm\/components\/contentfragmentlist\/v1\/contentfragmentlist","items":[{"description":"","title":"Adobe Headquarters","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Headquarters","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"345 Park Avenue","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Jose","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"95110-2704","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]},{"description":"","title":"Adobe San Francisco","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe San Francisco","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"601 Townsend Street","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Francisco","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"94103","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]},{"description":"","title":"Adobe Research Schweiz AG","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Research Schweiz AG","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"Barf\u00fcsserplatz 6","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"Basel","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"CH-4051","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"Switzerland","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/europe-middleeast-africa"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]}]}
PostCSS: CSS: Title
Tags
Content

The list can be filtered to display content fragments associated with a tag. In this example, the list is filtered by the core-components-examples:region/north-america tag – to show offices in North America.

Result

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

Adobe San Francisco

Title
Adobe San Francisco
Street Address
601 Townsend Street
City
San Francisco
Postal Code
94103
Country
USA
Region
core-components-examples:region/north-america
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
modelPath: /conf/core-components-examples/settings/dam/cfm/models/office
jcr:lastModifiedBy: admin
tagNames: core-components-examples:region/north-america
jcr:created:
parentPath: /content/dam/core-components-examples/library/sample-assets
jcr:lastModified:
sling:resourceType: core/wcm/components/contentfragmentlist/v1/contentfragmentlist
Markup:
<div class="contentfragmentlist">
  <section id="contentfragmentlist-187c77c98e" class="cmp-contentfragmentlist">
    <article class="cmp-contentfragment cmp-contentfragment--adobe-headquarters" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Headquarters</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Headquarters </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 345 Park Avenue </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Jose </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 95110-2704 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-san-francisco" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe San Francisco</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 601 Townsend Street </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 94103 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
  </section>
</div>
JSON:
{":type":"core\/wcm\/components\/contentfragmentlist\/v1\/contentfragmentlist","items":[{"description":"","title":"Adobe Headquarters","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Headquarters","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"345 Park Avenue","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Jose","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"95110-2704","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]},{"description":"","title":"Adobe San Francisco","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe San Francisco","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"601 Townsend Street","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Francisco","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"94103","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]}]}
PostCSS: CSS: Title
Order By and Sort Order
Content

The list can be ordered by element or property, ascending or descending. In this example, we order the offices by City, ascending.

Result

Adobe Research Schweiz AG

Title
Adobe Research Schweiz AG
Street Address
Barfüsserplatz 6
City
Basel
Postal Code
CH-4051
Country
Switzerland
Region
core-components-examples:region/europe-middleeast-africa

Adobe San Francisco

Title
Adobe San Francisco
Street Address
601 Townsend Street
City
San Francisco
Postal Code
94103
Country
USA
Region
core-components-examples:region/north-america

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
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
modelPath: /conf/core-components-examples/settings/dam/cfm/models/office
orderBy: jcr:content/data/master/city
jcr:lastModifiedBy: admin
jcr:created:
parentPath: /content/dam/core-components-examples/library/sample-assets
sortOrder: asc
jcr:lastModified:
sling:resourceType: core/wcm/components/contentfragmentlist/v1/contentfragmentlist
Markup:
<div class="contentfragmentlist">
  <section id="contentfragmentlist-34c1b7f53d" class="cmp-contentfragmentlist">
    <article class="cmp-contentfragment cmp-contentfragment--adobe-basel" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Research Schweiz AG</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Research Schweiz AG </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> Barfüsserplatz 6 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> Basel </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> CH-4051 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> Switzerland </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/europe-middleeast-africa </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-san-francisco" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe San Francisco</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 601 Townsend Street </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 94103 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-headquarters" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Headquarters</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Headquarters </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--streetAddress" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Street Address</dt>
          <dd class="cmp-contentfragment__element-value"> 345 Park Avenue </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Jose </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--postalCode" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Postal Code</dt>
          <dd class="cmp-contentfragment__element-value"> 95110-2704 </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--country" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Country</dt>
          <dd class="cmp-contentfragment__element-value"> USA </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--region" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Region</dt>
          <dd class="cmp-contentfragment__element-value"> core-components-examples:region/north-america </dd>
        </div>
      </dl>
    </article>
  </section>
</div>
JSON:
{":type":"core\/wcm\/components\/contentfragmentlist\/v1\/contentfragmentlist","items":[{"description":"","title":"Adobe Research Schweiz AG","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Research Schweiz AG","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"Barf\u00fcsserplatz 6","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"Basel","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"CH-4051","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"Switzerland","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/europe-middleeast-africa"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]},{"description":"","title":"Adobe San Francisco","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe San Francisco","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"601 Townsend Street","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Francisco","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"94103","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]},{"description":"","title":"Adobe Headquarters","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Headquarters","multiValue":false,":type":"string"},"streetAddress":{"title":"Street Address","dataType":"string","value":"345 Park Avenue","multiValue":false,":type":"text\/plain"},"city":{"title":"City","dataType":"string","value":"San Jose","multiValue":false,":type":"string"},"postalCode":{"title":"Postal Code","dataType":"string","value":"95110-2704","multiValue":false,":type":"string"},"country":{"title":"Country","dataType":"string","value":"USA","multiValue":false,":type":"string"},"region":{"title":"Region","dataType":"string","value":["core-components-examples:region\/north-america"],"multiValue":true,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","streetAddress","city","postalCode","country","region"]}]}
PostCSS: CSS: Title
Elements
Content

The content fragment elements to be displayed in the list can be configured by an author. In this example we again list the same offices, but filter the output to only show the title and city.

Result

Adobe Headquarters

Title
Adobe Headquarters
City
San Jose

Adobe San Francisco

Title
Adobe San Francisco
City
San Francisco

Adobe Research Schweiz AG

Title
Adobe Research Schweiz AG
City
Basel
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
modelPath: /conf/core-components-examples/settings/dam/cfm/models/office
jcr:lastModifiedBy: admin
elementNames: title,city
jcr:created:
parentPath: /content/dam/core-components-examples/library/sample-assets
jcr:lastModified:
sling:resourceType: core/wcm/components/contentfragmentlist/v1/contentfragmentlist
Markup:
<div class="contentfragmentlist">
  <section id="contentfragmentlist-09a3d143e5" class="cmp-contentfragmentlist">
    <article class="cmp-contentfragment cmp-contentfragment--adobe-headquarters" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Headquarters</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Headquarters </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Jose </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-san-francisco" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe San Francisco</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe San Francisco </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> San Francisco </dd>
        </div>
      </dl>
    </article>
    <article class="cmp-contentfragment cmp-contentfragment--adobe-basel" data-cmp-contentfragment-model="core-components-examples/models/office">
      <h3 class="cmp-contentfragment__title">Adobe Research Schweiz AG</h3>
      <dl class="cmp-contentfragment__elements">
        <div class="cmp-contentfragment__element cmp-contentfragment__element--title" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">Title</dt>
          <dd class="cmp-contentfragment__element-value"> Adobe Research Schweiz AG </dd>
        </div>
        <div class="cmp-contentfragment__element cmp-contentfragment__element--city" data-cmp-contentfragment-element-type="string">
          <dt class="cmp-contentfragment__element-title">City</dt>
          <dd class="cmp-contentfragment__element-value"> Basel </dd>
        </div>
      </dl>
    </article>
  </section>
</div>
JSON:
{":type":"core\/wcm\/components\/contentfragmentlist\/v1\/contentfragmentlist","items":[{"description":"","title":"Adobe Headquarters","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Headquarters","multiValue":false,":type":"string"},"city":{"title":"City","dataType":"string","value":"San Jose","multiValue":false,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","city"]},{"description":"","title":"Adobe San Francisco","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe San Francisco","multiValue":false,":type":"string"},"city":{"title":"City","dataType":"string","value":"San Francisco","multiValue":false,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","city"]},{"description":"","title":"Adobe Research Schweiz AG","model":"core-components-examples\/models\/office","elements":{"title":{"title":"Title","dataType":"string","value":"Adobe Research Schweiz AG","multiValue":false,":type":"string"},"city":{"title":"City","dataType":"string","value":"Basel","multiValue":false,":type":"string"}},":type":"dam:Asset","elementsOrder":["title","city"]}]}
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 *