List_v2

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.

Technical Documentation

GitHub

Using Core Components

Adobe Help Center

Examples

Built from Child Pages

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

Carousel
Content Fragment
Image
List
Separator
Social Sharing
Tabs
Teaser
Text
Title

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        linkItems:
        false
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183748270,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=48,MILLISECOND=270,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        parentPage:
        /content/core-components-examples/library
    

        sortOrder:
        asc
    

        showDescription:
        false
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1544183773565,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=56,SECOND=13,MILLISECOND=565,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        children

    
        

    

    
    
        
            Carousel
            
        
        
    


    
    
        
            Content Fragment
            
        
        
    


    
    
        
            Image
            
        
        
    


    
    
        
            List
            
        
        
    


    
    
        
            Separator
            
        
        
    


    
    
        
            Social Sharing
            
        
        
    


    
    
        
            Tabs
            
        
        
    


    
    
        
            Teaser
            
        
        
    


    
    
        
            Text
            
        
        
    


    
    
        
            Title


    JSON

Built from Fixed List

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

Carousel
Teaser
Text

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        tagsMatch:
        any
    

        linkItems:
        false
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183745708,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=45,MILLISECOND=708,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sortOrder:
        asc
    

        pages:
        /content/core-components-examples/library/carousel,/content/core-components-examples/library/teaser,/content/core-components-examples/library/text
    

        showDescription:
        false
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1547474999757,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=14,DAY_OF_YEAR=14,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=2,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=9,SECOND=59,MILLISECOND=757,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        static


    JSON

Built from Search

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

Carousel

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        tagsMatch:
        any
    

        linkItems:
        false
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183742230,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=42,MILLISECOND=230,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sortOrder:
        asc
    

        query:
        Carousel
    

        showDescription:
        false
    

        searchIn:
        /content/core-components-examples/library
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1547474825753,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=14,DAY_OF_YEAR=14,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=2,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=7,SECOND=5,MILLISECOND=753,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        search


    JSON

Built from Tags

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.

Image
Text
Title

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        tagsMatch:
        any
    

        linkItems:
        false
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183739480,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=39,MILLISECOND=480,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sortOrder:
        asc
    

        tagsSearchRoot:
        /content/core-components-examples/library
    

        tags:
        core-components-examples:component-type/atom
    

        showDescription:
        false
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1544183949973,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=59,SECOND=9,MILLISECOND=973,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        tags


    JSON

Order

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.

Title
Text
Teaser
Tabs
Social Sharing
Separator
List
Image
Content Fragment
Carousel

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        linkItems:
        false
    

        orderBy:
        title
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183737303,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=37,MILLISECOND=303,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        parentPage:
        /content/core-components-examples/library
    

        sortOrder:
        desc
    

        showDescription:
        false
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1544183991861,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=59,SECOND=51,MILLISECOND=861,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        children

    
        

    

    
    
        
            Title
            
        
        
    


    
    
        
            Text
            
        
        
    


    
    
        
            Teaser
            
        
        
    


    
    
        
            Tabs
            
        
        
    


    
    
        
            Social Sharing
            
        
        
    


    
    
        
            Separator
            
        
        
    


    
    
        
            List
            
        
        
    


    
    
        
            Image
            
        
        
    


    
    
        
            Content Fragment
            
        
        
    


    
    
        
            Carousel


    JSON

Max Items

List with the maximum number of items set to 4.

Carousel
Content Fragment
Image
List

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        false
    

        jcr:createdBy:
        admin
    

        linkItems:
        false
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183734586,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=34,MILLISECOND=586,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        parentPage:
        /content/core-components-examples/library
    

        sortOrder:
        asc
    

        maxItems:
        4
    

        showDescription:
        false
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184017236,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=0,SECOND=17,MILLISECOND=236,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        children

    
        

    

    
    
        
            Carousel
            
        
        
    


    
    
        
            Content Fragment
            
        
        
    


    
    
        
            Image
            
        
        
    


    
    
        
            List


    JSON

Items with Link, Description and Date

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

Carousel 2019-02-15 Cycle through content panels
Content Fragment 2019-01-16 Add a content fragment asset
Image 2019-02-15 Display an image asset
List 2019-01-16 Display a list of pages
Separator 2019-01-09 Display a section divider
Social Sharing 2019-01-09 Add social sharing links
Tabs 2019-01-22 Switchable content panels
Teaser 2019-01-09 Link an image and text
Text 2019-01-22 Display a rich text paragraph
Title 2019-01-16 Display a page heading

Properties
Markup
JSON


    
        jcr:primaryType:
        nt:unstructured
    

        showModificationDate:
        true
    

        jcr:createdBy:
        admin
    

        linkItems:
        true
    

        jcr:lastModifiedBy:
        admin
    

        jcr:created:
        java.util.GregorianCalendar[time=1544183731266,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=0,HOUR_OF_DAY=12,MINUTE=55,SECOND=31,MILLISECOND=266,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        parentPage:
        /content/core-components-examples/library
    

        sortOrder:
        asc
    

        showDescription:
        true
    

        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184033000,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=0,SECOND=33,MILLISECOND=0,ZONE_OFFSET=3600000,DST_OFFSET=0]
    

        sling:resourceType:
        core/wcm/components/list/v2/list
    

        childDepth:
        1
    

        listFrom:
        children

    
        

    

    
    
        
            Carousel
            2019-02-15
        
        Cycle through content panels
    


    
    
        
            Content Fragment
            2019-01-16
        
        Add a content fragment asset
    


    
    
        
            Image
            2019-02-15
        
        Display an image asset
    


    
    
        
            List
            2019-01-16
        
        Display a list of pages
    


    
    
        
            Separator
            2019-01-09
        
        Display a section divider
    


    
    
        
            Social Sharing
            2019-01-09
        
        Add social sharing links
    


    
    
        
            Tabs
            2019-01-22
        
        Switchable content panels
    


    
    
        
            Teaser
            2019-01-09
        
        Link an image and text
    


    
    
        
            Text
            2019-01-22
        
        Display a rich text paragraph
    


    
    
        
            Title
            2019-01-16
        
        Display a page heading


    JSON

Listv2