List

List can be used to display a list of pages. They can be defined either dynamically – by search query, tags or from a parent page – or as a static list of items.

Github URL
Adobe URL
Source URL
Title
Built from Child Pages
Content

List built from child pages of a root page. In this example the depth is 1 level but deeper structures can be configured.

Result
  • Title
  • Text
  • Image
  • Button
  • Teaser
  • Download
  • List
  • Experience Fragment
  • Content Fragment
  • Content Fragment List
  • Embed
  • PDF Viewer
  • Progress Bar
  • Social Sharing
  • Separator
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
linkItems: false
jcr:lastModifiedBy: admin
jcr:created:
parentPage: /content/core-components-examples/library/page-authoring
sortOrder: asc
showDescription: false
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: children
Markup:
<div class="list">
  <ul id="list-071ec16d50" data-cmp-data-layer="{&quot;list-071ec16d50&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T11:56:13Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-df1699a779&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/title.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Title</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Text</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-26f940ec0f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:34Z&quot;,&quot;dc:title&quot;:&quot;Image&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Image</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-5ce5bb112c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:37Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Button</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-bd937d6b13&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:32Z&quot;,&quot;dc:title&quot;:&quot;Teaser&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Teaser</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-d911db0f45&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:36Z&quot;,&quot;dc:title&quot;:&quot;Download&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/download.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Download</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-da73ac8b3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:40Z&quot;,&quot;dc:title&quot;:&quot;List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-849883059f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:39Z&quot;,&quot;dc:title&quot;:&quot;Experience Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/experience-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Experience Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-12f115629d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:38Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-f48a790a96&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:43Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment-list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-12fc929c8a&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Embed&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/embed.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Embed</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-9f8160f4bd&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-06-18T11:25:34Z&quot;,&quot;dc:title&quot;:&quot;PDF Viewer&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/pdf-viewer.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">PDF Viewer</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-5cc306b231&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-05-29T15:04:39Z&quot;,&quot;dc:title&quot;:&quot;Progress Bar&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/progressbar.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Progress Bar</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-db5309eae3&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Social Sharing&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/social-sharing.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Social Sharing</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-071ec16d50-item-611486886f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Separator&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/separator.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Separator</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-071ec16d50","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-071ec16d50-item-df1699a779","path":"\/content\/core-components-examples\/library\/page-authoring\/title","url":"\/content\/core-components-examples\/library\/page-authoring\/title.html","lastModified":1588167941487,"description":"Display a page heading","title":"Title","dataLayer":{"list-071ec16d50-item-df1699a779":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Title","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/title.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-071ec16d50-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-26f940ec0f","path":"\/content\/core-components-examples\/library\/page-authoring\/image","url":"\/content\/core-components-examples\/library\/page-authoring\/image.html","lastModified":1550255022224,"description":"Display an image asset","title":"Image","dataLayer":{"list-071ec16d50-item-26f940ec0f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:34Z","dc:title":"Image","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-5ce5bb112c","path":"\/content\/core-components-examples\/library\/page-authoring\/button","url":"\/content\/core-components-examples\/library\/page-authoring\/button.html","lastModified":1547062227177,"description":"Display a button or anchor button","title":"Button","dataLayer":{"list-071ec16d50-item-5ce5bb112c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:37Z","dc:title":"Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-bd937d6b13","path":"\/content\/core-components-examples\/library\/page-authoring\/teaser","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","lastModified":1575799718587,"description":"Link an image and text","title":"Teaser","dataLayer":{"list-071ec16d50-item-bd937d6b13":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:32Z","dc:title":"Teaser","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-d911db0f45","path":"\/content\/core-components-examples\/library\/page-authoring\/download","url":"\/content\/core-components-examples\/library\/page-authoring\/download.html","lastModified":1558992253683,"description":"Display an asset for download","title":"Download","dataLayer":{"list-071ec16d50-item-d911db0f45":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:36Z","dc:title":"Download","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/download.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-da73ac8b3b","path":"\/content\/core-components-examples\/library\/page-authoring\/list","url":"\/content\/core-components-examples\/library\/page-authoring\/list.html","lastModified":1547642282466,"description":"Display a list of pages","title":"List","dataLayer":{"list-071ec16d50-item-da73ac8b3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:40Z","dc:title":"List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-849883059f","path":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html","lastModified":1566294323252,"description":"Display an experience fragment","title":"Experience Fragment","dataLayer":{"list-071ec16d50-item-849883059f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:39Z","dc:title":"Experience Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-12f115629d","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html","lastModified":1547644839952,"description":"Display a content fragment asset","title":"Content Fragment","dataLayer":{"list-071ec16d50-item-12f115629d":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:38Z","dc:title":"Content Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-f48a790a96","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html","lastModified":1554130037469,"description":"Display a list of content fragments","title":"Content Fragment List","dataLayer":{"list-071ec16d50-item-f48a790a96":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:43Z","dc:title":"Content Fragment List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-12fc929c8a","path":"\/content\/core-components-examples\/library\/page-authoring\/embed","url":"\/content\/core-components-examples\/library\/page-authoring\/embed.html","lastModified":1567092519658,"description":"Embed a third-party widget","title":"Embed","dataLayer":{"list-071ec16d50-item-12fc929c8a":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Embed","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/embed.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-9f8160f4bd","path":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer","url":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html","lastModified":1594988947598,"description":"Embed a PDF Viewer widget to display Document Cloud PDF's","title":"PDF Viewer","dataLayer":{"list-071ec16d50-item-9f8160f4bd":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-06-18T11:25:34Z","dc:title":"PDF Viewer","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-5cc306b231","path":"\/content\/core-components-examples\/library\/page-authoring\/progressbar","url":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html","lastModified":1594989098927,"description":"Display a progress indicator","title":"Progress Bar","dataLayer":{"list-071ec16d50-item-5cc306b231":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-05-29T15:04:39Z","dc:title":"Progress Bar","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-db5309eae3","path":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing","url":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html","lastModified":1547062206375,"description":"Add social sharing links","title":"Social Sharing","dataLayer":{"list-071ec16d50-item-db5309eae3":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Social Sharing","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-071ec16d50-item-611486886f","path":"\/content\/core-components-examples\/library\/page-authoring\/separator","url":"\/content\/core-components-examples\/library\/page-authoring\/separator.html","lastModified":1547062195738,"description":"Display a section divider","title":"Separator","dataLayer":{"list-071ec16d50-item-611486886f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Separator","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/separator.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-071ec16d50":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2018-12-07T11:56:13Z"}}}
PostCSS: CSS: Title
Built from Fixed List
Content

List built from a bespoke set of pages defined directly in the component edit dialog.

Result
  • Carousel
  • Teaser
  • Text
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
tagsMatch: any
linkItems: false
jcr:lastModifiedBy: admin
jcr:created:
sortOrder: asc
pages: /content/core-components-examples/library/container/carousel,/content/core-components-examples/library/page-authoring/teaser,/content/core-components-examples/library/page-authoring/text
showDescription: false
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: static
Markup:
<div class="list">
  <ul id="list-f50b36b533" data-cmp-data-layer="{&quot;list-f50b36b533&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-14T14:09:59Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-f50b36b533-item-b0a08e7237&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:28Z&quot;,&quot;dc:title&quot;:&quot;Carousel&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Carousel</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-f50b36b533-item-bd937d6b13&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:32Z&quot;,&quot;dc:title&quot;:&quot;Teaser&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Teaser</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-f50b36b533-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Text</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-f50b36b533","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-f50b36b533-item-b0a08e7237","path":"\/content\/core-components-examples\/library\/container\/carousel","url":"\/content\/core-components-examples\/library\/container\/carousel.html","lastModified":1550252345916,"description":"Cycle through content panels","title":"Carousel","dataLayer":{"list-f50b36b533-item-b0a08e7237":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:28Z","dc:title":"Carousel","xdm:linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-f50b36b533-item-bd937d6b13","path":"\/content\/core-components-examples\/library\/page-authoring\/teaser","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","lastModified":1575799718587,"description":"Link an image and text","title":"Teaser","dataLayer":{"list-f50b36b533-item-bd937d6b13":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:32Z","dc:title":"Teaser","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-f50b36b533-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-f50b36b533-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-f50b36b533":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2019-01-14T14:09:59Z"}}}
PostCSS: CSS: Title
Built from Search
Content

List built from a search query term under a defined root page.

Result
  • Category Carousel
  • Carousel
  • Product Carousel
  • Related Products
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
tagsMatch: any
linkItems: false
jcr:lastModifiedBy: admin
jcr:created:
sortOrder: asc
query: Carousel
showDescription: false
searchIn: /content/core-components-examples/library
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: search
Markup:
<div class="list">
  <ul id="list-64bf657ac8" data-cmp-data-layer="{&quot;list-64bf657ac8&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-14T14:07:05Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-64bf657ac8-item-cf30385173&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2021-02-11T17:13:13Z&quot;,&quot;dc:title&quot;:&quot;Category Carousel&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/commerce/categorycarousel.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Category Carousel</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-64bf657ac8-item-b0a08e7237&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:28Z&quot;,&quot;dc:title&quot;:&quot;Carousel&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/container/carousel.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Carousel</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-64bf657ac8-item-a951b11a6c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2021-02-11T17:13:13Z&quot;,&quot;dc:title&quot;:&quot;Product Carousel&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/commerce/productcarousel.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Product Carousel</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-64bf657ac8-item-9e0a26222d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2021-02-11T17:13:13Z&quot;,&quot;dc:title&quot;:&quot;Related Products&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/commerce/relatedproducts.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Related Products</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-64bf657ac8","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-64bf657ac8-item-cf30385173","path":"\/content\/core-components-examples\/library\/commerce\/categorycarousel","url":"\/content\/core-components-examples\/library\/commerce\/categorycarousel.html","lastModified":1602669903012,"description":"Display product categories in a carousel","title":"Category Carousel","dataLayer":{"list-64bf657ac8-item-cf30385173":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2021-02-11T17:13:13Z","dc:title":"Category Carousel","xdm:linkURL":"\/content\/core-components-examples\/library\/commerce\/categorycarousel.html"}},":type":"cif-components-examples\/components\/page"},{"id":"list-64bf657ac8-item-b0a08e7237","path":"\/content\/core-components-examples\/library\/container\/carousel","url":"\/content\/core-components-examples\/library\/container\/carousel.html","lastModified":1550252345916,"description":"Cycle through content panels","title":"Carousel","dataLayer":{"list-64bf657ac8-item-b0a08e7237":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:28Z","dc:title":"Carousel","xdm:linkURL":"\/content\/core-components-examples\/library\/container\/carousel.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-64bf657ac8-item-a951b11a6c","path":"\/content\/core-components-examples\/library\/commerce\/productcarousel","url":"\/content\/core-components-examples\/library\/commerce\/productcarousel.html","lastModified":1589359153015,"description":"Display commerce product carousel","title":"Product Carousel","dataLayer":{"list-64bf657ac8-item-a951b11a6c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2021-02-11T17:13:13Z","dc:title":"Product Carousel","xdm:linkURL":"\/content\/core-components-examples\/library\/commerce\/productcarousel.html"}},":type":"cif-components-examples\/components\/page"},{"id":"list-64bf657ac8-item-9e0a26222d","path":"\/content\/core-components-examples\/library\/commerce\/relatedproducts","url":"\/content\/core-components-examples\/library\/commerce\/relatedproducts.html","lastModified":1589807057713,"description":"Display commerce related products","title":"Related Products","dataLayer":{"list-64bf657ac8-item-9e0a26222d":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2021-02-11T17:13:13Z","dc:title":"Related Products","xdm:linkURL":"\/content\/core-components-examples\/library\/commerce\/relatedproducts.html"}},":type":"cif-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-64bf657ac8":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2019-01-14T14:07:05Z"}}}
PostCSS: CSS: Title
Built from Tags
Content

List built from a set of tags to be found related to pages under a root page. Uses the default match Any tag feature, but it’s also possible to configure the component to match all tags.

Result
  • Social Sharing
  • Teaser
  • Image
  • Experience Fragment
  • Text
  • Separator
  • List
  • Download
  • Content Fragment List
  • Embed
  • Content Fragment
  • Button
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
tagsMatch: any
linkItems: false
jcr:lastModifiedBy: admin
jcr:created:
sortOrder: asc
tagsSearchRoot: /content/core-components-examples/library
tags: core-components-examples:component-type/page-authoring
showDescription: false
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: tags
Markup:
<div class="list">
  <ul id="list-37924bbb4c" data-cmp-data-layer="{&quot;list-37924bbb4c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T11:59:09Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-db5309eae3&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Social Sharing&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/social-sharing.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Social Sharing</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-bd937d6b13&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:32Z&quot;,&quot;dc:title&quot;:&quot;Teaser&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Teaser</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-26f940ec0f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:34Z&quot;,&quot;dc:title&quot;:&quot;Image&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Image</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-849883059f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:39Z&quot;,&quot;dc:title&quot;:&quot;Experience Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/experience-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Experience Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Text</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-611486886f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Separator&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/separator.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Separator</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-da73ac8b3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:40Z&quot;,&quot;dc:title&quot;:&quot;List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-d911db0f45&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:36Z&quot;,&quot;dc:title&quot;:&quot;Download&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/download.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Download</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-f48a790a96&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:43Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment-list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-12fc929c8a&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Embed&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/embed.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Embed</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-12f115629d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:38Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-37924bbb4c-item-5ce5bb112c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:37Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Button</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-37924bbb4c","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-37924bbb4c-item-db5309eae3","path":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing","url":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html","lastModified":1547062206375,"description":"Add social sharing links","title":"Social Sharing","dataLayer":{"list-37924bbb4c-item-db5309eae3":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Social Sharing","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-bd937d6b13","path":"\/content\/core-components-examples\/library\/page-authoring\/teaser","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","lastModified":1575799718587,"description":"Link an image and text","title":"Teaser","dataLayer":{"list-37924bbb4c-item-bd937d6b13":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:32Z","dc:title":"Teaser","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-26f940ec0f","path":"\/content\/core-components-examples\/library\/page-authoring\/image","url":"\/content\/core-components-examples\/library\/page-authoring\/image.html","lastModified":1550255022224,"description":"Display an image asset","title":"Image","dataLayer":{"list-37924bbb4c-item-26f940ec0f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:34Z","dc:title":"Image","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-849883059f","path":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html","lastModified":1566294323252,"description":"Display an experience fragment","title":"Experience Fragment","dataLayer":{"list-37924bbb4c-item-849883059f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:39Z","dc:title":"Experience Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-37924bbb4c-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-611486886f","path":"\/content\/core-components-examples\/library\/page-authoring\/separator","url":"\/content\/core-components-examples\/library\/page-authoring\/separator.html","lastModified":1547062195738,"description":"Display a section divider","title":"Separator","dataLayer":{"list-37924bbb4c-item-611486886f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Separator","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/separator.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-da73ac8b3b","path":"\/content\/core-components-examples\/library\/page-authoring\/list","url":"\/content\/core-components-examples\/library\/page-authoring\/list.html","lastModified":1547642282466,"description":"Display a list of pages","title":"List","dataLayer":{"list-37924bbb4c-item-da73ac8b3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:40Z","dc:title":"List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-d911db0f45","path":"\/content\/core-components-examples\/library\/page-authoring\/download","url":"\/content\/core-components-examples\/library\/page-authoring\/download.html","lastModified":1558992253683,"description":"Display an asset for download","title":"Download","dataLayer":{"list-37924bbb4c-item-d911db0f45":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:36Z","dc:title":"Download","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/download.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-f48a790a96","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html","lastModified":1554130037469,"description":"Display a list of content fragments","title":"Content Fragment List","dataLayer":{"list-37924bbb4c-item-f48a790a96":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:43Z","dc:title":"Content Fragment List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-12fc929c8a","path":"\/content\/core-components-examples\/library\/page-authoring\/embed","url":"\/content\/core-components-examples\/library\/page-authoring\/embed.html","lastModified":1567092519658,"description":"Embed a third-party widget","title":"Embed","dataLayer":{"list-37924bbb4c-item-12fc929c8a":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Embed","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/embed.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-12f115629d","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html","lastModified":1547644839952,"description":"Display a content fragment asset","title":"Content Fragment","dataLayer":{"list-37924bbb4c-item-12f115629d":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:38Z","dc:title":"Content Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-37924bbb4c-item-5ce5bb112c","path":"\/content\/core-components-examples\/library\/page-authoring\/button","url":"\/content\/core-components-examples\/library\/page-authoring\/button.html","lastModified":1547062227177,"description":"Display a button or anchor button","title":"Button","dataLayer":{"list-37924bbb4c-item-5ce5bb112c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:37Z","dc:title":"Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-37924bbb4c":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2018-12-07T11:59:09Z"}}}
PostCSS: CSS: Title
Order
Content

List built from child pages, with the sort order set to order by title, descending. It is also possible to order by the last modified date.

Result
  • Title
  • Text
  • Teaser
  • Social Sharing
  • Separator
  • Progress Bar
  • PDF Viewer
  • List
  • Image
  • Experience Fragment
  • Embed
  • Download
  • Content Fragment List
  • Content Fragment
  • Button
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
linkItems: false
orderBy: title
jcr:lastModifiedBy: admin
jcr:created:
parentPage: /content/core-components-examples/library/page-authoring
sortOrder: desc
showDescription: false
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: children
Markup:
<div class="list">
  <ul id="list-b5ec41c712" data-cmp-data-layer="{&quot;list-b5ec41c712&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T11:59:51Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-df1699a779&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/title.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Title</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Text</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-bd937d6b13&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:32Z&quot;,&quot;dc:title&quot;:&quot;Teaser&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Teaser</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-db5309eae3&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Social Sharing&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/social-sharing.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Social Sharing</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-611486886f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Separator&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/separator.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Separator</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-5cc306b231&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-05-29T15:04:39Z&quot;,&quot;dc:title&quot;:&quot;Progress Bar&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/progressbar.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Progress Bar</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-9f8160f4bd&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-06-18T11:25:34Z&quot;,&quot;dc:title&quot;:&quot;PDF Viewer&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/pdf-viewer.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">PDF Viewer</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-da73ac8b3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:40Z&quot;,&quot;dc:title&quot;:&quot;List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-26f940ec0f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:34Z&quot;,&quot;dc:title&quot;:&quot;Image&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Image</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-849883059f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:39Z&quot;,&quot;dc:title&quot;:&quot;Experience Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/experience-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Experience Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-12fc929c8a&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Embed&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/embed.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Embed</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-d911db0f45&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:36Z&quot;,&quot;dc:title&quot;:&quot;Download&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/download.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Download</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-f48a790a96&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:43Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment-list.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment List</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-12f115629d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:38Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Content Fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-b5ec41c712-item-5ce5bb112c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:37Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Button</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-b5ec41c712","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-b5ec41c712-item-df1699a779","path":"\/content\/core-components-examples\/library\/page-authoring\/title","url":"\/content\/core-components-examples\/library\/page-authoring\/title.html","lastModified":1588167941487,"description":"Display a page heading","title":"Title","dataLayer":{"list-b5ec41c712-item-df1699a779":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Title","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/title.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-b5ec41c712-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-bd937d6b13","path":"\/content\/core-components-examples\/library\/page-authoring\/teaser","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","lastModified":1575799718587,"description":"Link an image and text","title":"Teaser","dataLayer":{"list-b5ec41c712-item-bd937d6b13":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:32Z","dc:title":"Teaser","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-db5309eae3","path":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing","url":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html","lastModified":1547062206375,"description":"Add social sharing links","title":"Social Sharing","dataLayer":{"list-b5ec41c712-item-db5309eae3":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Social Sharing","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-611486886f","path":"\/content\/core-components-examples\/library\/page-authoring\/separator","url":"\/content\/core-components-examples\/library\/page-authoring\/separator.html","lastModified":1547062195738,"description":"Display a section divider","title":"Separator","dataLayer":{"list-b5ec41c712-item-611486886f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Separator","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/separator.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-5cc306b231","path":"\/content\/core-components-examples\/library\/page-authoring\/progressbar","url":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html","lastModified":1594989098927,"description":"Display a progress indicator","title":"Progress Bar","dataLayer":{"list-b5ec41c712-item-5cc306b231":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-05-29T15:04:39Z","dc:title":"Progress Bar","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-9f8160f4bd","path":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer","url":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html","lastModified":1594988947598,"description":"Embed a PDF Viewer widget to display Document Cloud PDF's","title":"PDF Viewer","dataLayer":{"list-b5ec41c712-item-9f8160f4bd":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-06-18T11:25:34Z","dc:title":"PDF Viewer","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-da73ac8b3b","path":"\/content\/core-components-examples\/library\/page-authoring\/list","url":"\/content\/core-components-examples\/library\/page-authoring\/list.html","lastModified":1547642282466,"description":"Display a list of pages","title":"List","dataLayer":{"list-b5ec41c712-item-da73ac8b3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:40Z","dc:title":"List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-26f940ec0f","path":"\/content\/core-components-examples\/library\/page-authoring\/image","url":"\/content\/core-components-examples\/library\/page-authoring\/image.html","lastModified":1550255022224,"description":"Display an image asset","title":"Image","dataLayer":{"list-b5ec41c712-item-26f940ec0f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:34Z","dc:title":"Image","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-849883059f","path":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html","lastModified":1566294323252,"description":"Display an experience fragment","title":"Experience Fragment","dataLayer":{"list-b5ec41c712-item-849883059f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:39Z","dc:title":"Experience Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-12fc929c8a","path":"\/content\/core-components-examples\/library\/page-authoring\/embed","url":"\/content\/core-components-examples\/library\/page-authoring\/embed.html","lastModified":1567092519658,"description":"Embed a third-party widget","title":"Embed","dataLayer":{"list-b5ec41c712-item-12fc929c8a":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Embed","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/embed.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-d911db0f45","path":"\/content\/core-components-examples\/library\/page-authoring\/download","url":"\/content\/core-components-examples\/library\/page-authoring\/download.html","lastModified":1558992253683,"description":"Display an asset for download","title":"Download","dataLayer":{"list-b5ec41c712-item-d911db0f45":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:36Z","dc:title":"Download","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/download.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-f48a790a96","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html","lastModified":1554130037469,"description":"Display a list of content fragments","title":"Content Fragment List","dataLayer":{"list-b5ec41c712-item-f48a790a96":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:43Z","dc:title":"Content Fragment List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-12f115629d","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html","lastModified":1547644839952,"description":"Display a content fragment asset","title":"Content Fragment","dataLayer":{"list-b5ec41c712-item-12f115629d":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:38Z","dc:title":"Content Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-b5ec41c712-item-5ce5bb112c","path":"\/content\/core-components-examples\/library\/page-authoring\/button","url":"\/content\/core-components-examples\/library\/page-authoring\/button.html","lastModified":1547062227177,"description":"Display a button or anchor button","title":"Button","dataLayer":{"list-b5ec41c712-item-5ce5bb112c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:37Z","dc:title":"Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-b5ec41c712":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2018-12-07T11:59:51Z"}}}
PostCSS: CSS: Title
Max Items
Content

List with the maximum number of items set to 4.

Result
  • Title
  • Text
  • Image
  • Button
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: false
jcr:createdBy: admin
linkItems: false
jcr:lastModifiedBy: admin
jcr:created:
parentPage: /content/core-components-examples/library/page-authoring
sortOrder: asc
maxItems: 4
showDescription: false
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: children
Markup:
<div class="list">
  <ul id="list-88a698b7a4" data-cmp-data-layer="{&quot;list-88a698b7a4&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:00:17Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-88a698b7a4-item-df1699a779&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/title.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Title</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-88a698b7a4-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Text</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-88a698b7a4-item-26f940ec0f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:34Z&quot;,&quot;dc:title&quot;:&quot;Image&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Image</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-88a698b7a4-item-5ce5bb112c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:37Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
      <article>
        <span class="cmp-list__item-title">Button</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-88a698b7a4","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-88a698b7a4-item-df1699a779","path":"\/content\/core-components-examples\/library\/page-authoring\/title","url":"\/content\/core-components-examples\/library\/page-authoring\/title.html","lastModified":1588167941487,"description":"Display a page heading","title":"Title","dataLayer":{"list-88a698b7a4-item-df1699a779":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Title","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/title.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-88a698b7a4-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-88a698b7a4-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-88a698b7a4-item-26f940ec0f","path":"\/content\/core-components-examples\/library\/page-authoring\/image","url":"\/content\/core-components-examples\/library\/page-authoring\/image.html","lastModified":1550255022224,"description":"Display an image asset","title":"Image","dataLayer":{"list-88a698b7a4-item-26f940ec0f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:34Z","dc:title":"Image","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-88a698b7a4-item-5ce5bb112c","path":"\/content\/core-components-examples\/library\/page-authoring\/button","url":"\/content\/core-components-examples\/library\/page-authoring\/button.html","lastModified":1547062227177,"description":"Display a button or anchor button","title":"Button","dataLayer":{"list-88a698b7a4-item-5ce5bb112c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:37Z","dc:title":"Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":false,"showModificationDate":false,"linkItems":false,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-88a698b7a4":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2018-12-07T12:00:17Z"}}}
PostCSS: CSS: Title
Items with Link, Description and Date
Content

The rendering of the list items can be configured to optionally display a link to the page, page description and last modified date.

Result
Properties:
jcr:primaryType: nt:unstructured
showModificationDate: true
jcr:createdBy: admin
linkItems: true
jcr:lastModifiedBy: admin
jcr:created:
parentPage: /content/core-components-examples/library/page-authoring
sortOrder: asc
showDescription: true
jcr:lastModified:
sling:resourceType: core/wcm/components/list/v2/list
childDepth: 1
listFrom: children
Markup:
<div class="list">
  <ul id="list-949c81eff0" data-cmp-data-layer="{&quot;list-949c81eff0&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:00:33Z&quot;}}" class="cmp-list">
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-df1699a779&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Title&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/title.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/title.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Title</span>
          <span class="cmp-list__item-date">2020-04-29</span>
        </a>
        <span class="cmp-list__item-description">Display a page heading</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-e13089bf3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Text&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/text.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/text.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Text</span>
          <span class="cmp-list__item-date">2019-01-22</span>
        </a>
        <span class="cmp-list__item-description">Display a rich text paragraph</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-26f940ec0f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:34Z&quot;,&quot;dc:title&quot;:&quot;Image&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/image.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Image</span>
          <span class="cmp-list__item-date">2019-02-15</span>
        </a>
        <span class="cmp-list__item-description">Display an image asset</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-5ce5bb112c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:37Z&quot;,&quot;dc:title&quot;:&quot;Button&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/button.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/button.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Button</span>
          <span class="cmp-list__item-date">2019-01-09</span>
        </a>
        <span class="cmp-list__item-description">Display a button or anchor button</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-bd937d6b13&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:32Z&quot;,&quot;dc:title&quot;:&quot;Teaser&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/teaser.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/teaser.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Teaser</span>
          <span class="cmp-list__item-date">2019-12-08</span>
        </a>
        <span class="cmp-list__item-description">Link an image and text</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-d911db0f45&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:36Z&quot;,&quot;dc:title&quot;:&quot;Download&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/download.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/download.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Download</span>
          <span class="cmp-list__item-date">2019-05-27</span>
        </a>
        <span class="cmp-list__item-description">Display an asset for download</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-da73ac8b3b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:40Z&quot;,&quot;dc:title&quot;:&quot;List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/list.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/list.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">List</span>
          <span class="cmp-list__item-date">2019-01-16</span>
        </a>
        <span class="cmp-list__item-description">Display a list of pages</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-849883059f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:39Z&quot;,&quot;dc:title&quot;:&quot;Experience Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/experience-fragment.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/experience-fragment.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Experience Fragment</span>
          <span class="cmp-list__item-date">2019-08-20</span>
        </a>
        <span class="cmp-list__item-description">Display an experience fragment</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-12f115629d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:38Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/content-fragment.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Content Fragment</span>
          <span class="cmp-list__item-date">2019-01-16</span>
        </a>
        <span class="cmp-list__item-description">Display a content fragment asset</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-f48a790a96&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:43Z&quot;,&quot;dc:title&quot;:&quot;Content Fragment List&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/content-fragment-list.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/content-fragment-list.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Content Fragment List</span>
          <span class="cmp-list__item-date">2019-04-01</span>
        </a>
        <span class="cmp-list__item-description">Display a list of content fragments</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-12fc929c8a&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Embed&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/embed.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/embed.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Embed</span>
          <span class="cmp-list__item-date">2019-08-29</span>
        </a>
        <span class="cmp-list__item-description">Embed a third-party widget</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-9f8160f4bd&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-06-18T11:25:34Z&quot;,&quot;dc:title&quot;:&quot;PDF Viewer&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/pdf-viewer.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/pdf-viewer.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">PDF Viewer</span>
          <span class="cmp-list__item-date">2020-07-17</span>
        </a>
        <span class="cmp-list__item-description">Embed a PDF Viewer widget to display Document Cloud PDF's</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-5cc306b231&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-05-29T15:04:39Z&quot;,&quot;dc:title&quot;:&quot;Progress Bar&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/progressbar.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/progressbar.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Progress Bar</span>
          <span class="cmp-list__item-date">2020-07-17</span>
        </a>
        <span class="cmp-list__item-description">Display a progress indicator</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-db5309eae3&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:42Z&quot;,&quot;dc:title&quot;:&quot;Social Sharing&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/social-sharing.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/social-sharing.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Social Sharing</span>
          <span class="cmp-list__item-date">2019-01-09</span>
        </a>
        <span class="cmp-list__item-description">Add social sharing links</span>
      </article>
    </li>
    <li class="cmp-list__item" data-cmp-data-layer="{&quot;list-949c81eff0-item-611486886f&quot;:{&quot;@type&quot;:&quot;core/wcm/components/list/v2/list/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:41Z&quot;,&quot;dc:title&quot;:&quot;Separator&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/separator.html&quot;}}">
      <article>
        <a class="cmp-list__item-link" href="/content/core-components-examples/library/page-authoring/separator.html" data-cmp-clickable="">
          <span class="cmp-list__item-title">Separator</span>
          <span class="cmp-list__item-date">2019-01-09</span>
        </a>
        <span class="cmp-list__item-description">Display a section divider</span>
      </article>
    </li>
  </ul>
</div>
JSON:
{"id":"list-949c81eff0","dateFormatString":"yyyy-MM-dd","items":[{"id":"list-949c81eff0-item-df1699a779","path":"\/content\/core-components-examples\/library\/page-authoring\/title","url":"\/content\/core-components-examples\/library\/page-authoring\/title.html","lastModified":1588167941487,"description":"Display a page heading","title":"Title","dataLayer":{"list-949c81eff0-item-df1699a779":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Title","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/title.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-e13089bf3b","path":"\/content\/core-components-examples\/library\/page-authoring\/text","url":"\/content\/core-components-examples\/library\/page-authoring\/text.html","lastModified":1548159422163,"description":"Display a rich text paragraph","title":"Text","dataLayer":{"list-949c81eff0-item-e13089bf3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Text","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/text.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-26f940ec0f","path":"\/content\/core-components-examples\/library\/page-authoring\/image","url":"\/content\/core-components-examples\/library\/page-authoring\/image.html","lastModified":1550255022224,"description":"Display an image asset","title":"Image","dataLayer":{"list-949c81eff0-item-26f940ec0f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:34Z","dc:title":"Image","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-5ce5bb112c","path":"\/content\/core-components-examples\/library\/page-authoring\/button","url":"\/content\/core-components-examples\/library\/page-authoring\/button.html","lastModified":1547062227177,"description":"Display a button or anchor button","title":"Button","dataLayer":{"list-949c81eff0-item-5ce5bb112c":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:37Z","dc:title":"Button","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/button.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-bd937d6b13","path":"\/content\/core-components-examples\/library\/page-authoring\/teaser","url":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html","lastModified":1575799718587,"description":"Link an image and text","title":"Teaser","dataLayer":{"list-949c81eff0-item-bd937d6b13":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:32Z","dc:title":"Teaser","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/teaser.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-d911db0f45","path":"\/content\/core-components-examples\/library\/page-authoring\/download","url":"\/content\/core-components-examples\/library\/page-authoring\/download.html","lastModified":1558992253683,"description":"Display an asset for download","title":"Download","dataLayer":{"list-949c81eff0-item-d911db0f45":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:36Z","dc:title":"Download","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/download.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-da73ac8b3b","path":"\/content\/core-components-examples\/library\/page-authoring\/list","url":"\/content\/core-components-examples\/library\/page-authoring\/list.html","lastModified":1547642282466,"description":"Display a list of pages","title":"List","dataLayer":{"list-949c81eff0-item-da73ac8b3b":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:40Z","dc:title":"List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-849883059f","path":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html","lastModified":1566294323252,"description":"Display an experience fragment","title":"Experience Fragment","dataLayer":{"list-949c81eff0-item-849883059f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:39Z","dc:title":"Experience Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/experience-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-12f115629d","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html","lastModified":1547644839952,"description":"Display a content fragment asset","title":"Content Fragment","dataLayer":{"list-949c81eff0-item-12f115629d":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:38Z","dc:title":"Content Fragment","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-f48a790a96","path":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list","url":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html","lastModified":1554130037469,"description":"Display a list of content fragments","title":"Content Fragment List","dataLayer":{"list-949c81eff0-item-f48a790a96":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:43Z","dc:title":"Content Fragment List","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/content-fragment-list.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-12fc929c8a","path":"\/content\/core-components-examples\/library\/page-authoring\/embed","url":"\/content\/core-components-examples\/library\/page-authoring\/embed.html","lastModified":1567092519658,"description":"Embed a third-party widget","title":"Embed","dataLayer":{"list-949c81eff0-item-12fc929c8a":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Embed","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/embed.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-9f8160f4bd","path":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer","url":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html","lastModified":1594988947598,"description":"Embed a PDF Viewer widget to display Document Cloud PDF's","title":"PDF Viewer","dataLayer":{"list-949c81eff0-item-9f8160f4bd":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-06-18T11:25:34Z","dc:title":"PDF Viewer","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/pdf-viewer.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-5cc306b231","path":"\/content\/core-components-examples\/library\/page-authoring\/progressbar","url":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html","lastModified":1594989098927,"description":"Display a progress indicator","title":"Progress Bar","dataLayer":{"list-949c81eff0-item-5cc306b231":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-05-29T15:04:39Z","dc:title":"Progress Bar","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/progressbar.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-db5309eae3","path":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing","url":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html","lastModified":1547062206375,"description":"Add social sharing links","title":"Social Sharing","dataLayer":{"list-949c81eff0-item-db5309eae3":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:42Z","dc:title":"Social Sharing","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/social-sharing.html"}},":type":"core-components-examples\/components\/page"},{"id":"list-949c81eff0-item-611486886f","path":"\/content\/core-components-examples\/library\/page-authoring\/separator","url":"\/content\/core-components-examples\/library\/page-authoring\/separator.html","lastModified":1547062195738,"description":"Display a section divider","title":"Separator","dataLayer":{"list-949c81eff0-item-611486886f":{"@type":"core\/wcm\/components\/list\/v2\/list\/item","repo:modifyDate":"2020-01-16T15:15:41Z","dc:title":"Separator","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/separator.html"}},":type":"core-components-examples\/components\/page"}],"showDescription":true,"showModificationDate":true,"linkItems":true,":type":"core\/wcm\/components\/list\/v2\/list","dataLayer":{"list-949c81eff0":{"@type":"core\/wcm\/components\/list\/v2\/list","repo:modifyDate":"2018-12-07T12:00:33Z"}}}
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 *