Listv3
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.
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.
-
AEM Forms Container -
Title -
Text -
Image -
Button -
Teaser -
Download -
List -
Experience Fragment -
Content Fragment -
Content Fragment List -
Embed -
PDF Viewer -
Progress Bar -
Social Sharing -
Separator
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- parentPage: /content/core-components-examples/library/page-authoring
- sortOrder: asc
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
AEM Forms Container
-
Title
-
Text
-
Image
-
Button
-
Teaser
-
Download
-
List
-
Experience Fragment
-
Content Fragment
-
Content Fragment List
-
Embed
-
PDF Viewer
-
Progress Bar
-
Social Sharing
-
Separator
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
- showModificationDate: false
- tagsMatch: any
- linkItems: false
- 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
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: static
-
Carousel
-
Teaser
-
Text
Built from Search
List built from a search query term under a defined root page.
-
Carousel -
Category Carousel -
Product Carousel -
Related Products
- Properties
- Markup
- JSON
- showModificationDate: false
- tagsMatch: any
- linkItems: false
- sortOrder: asc
- query: Carousel
- showDescription: false
- searchIn: /content/core-components-examples/library
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: search
-
Carousel
-
Category Carousel
-
Product Carousel
-
Related Products
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.
-
Social Sharing -
Teaser -
Image -
Experience Fragment -
Text -
Separator -
List -
Download -
Content Fragment List -
Embed -
Content Fragment -
Button
- Properties
- Markup
- JSON
- showModificationDate: false
- tagsMatch: any
- linkItems: false
- sortOrder: asc
- tagsSearchRoot: /content/core-components-examples/library
- tags: core-components-examples:component-type/page-authoring
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: tags
-
Social Sharing
-
Teaser
-
Image
-
Experience Fragment
-
Text
-
Separator
-
List
-
Download
-
Content Fragment List
-
Embed
-
Content Fragment
-
Button
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 -
Social Sharing -
Separator -
Progress Bar -
PDF Viewer -
List -
Image -
Experience Fragment -
Embed -
Download -
Content Fragment List -
Content Fragment -
Button -
AEM Forms Container
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- orderBy: title
- parentPage: /content/core-components-examples/library/page-authoring
- sortOrder: desc
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
Title
-
Text
-
Teaser
-
Social Sharing
-
Separator
-
Progress Bar
-
PDF Viewer
-
List
-
Image
-
Experience Fragment
-
Embed
-
Download
-
Content Fragment List
-
Content Fragment
-
Button
-
AEM Forms Container
Max Items
List with the maximum number of items set to 4.
-
AEM Forms Container -
Title -
Text -
Image
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- parentPage: /content/core-components-examples/library/page-authoring
- sortOrder: asc
- maxItems: 4
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
AEM Forms Container
-
Title
-
Text
-
Image
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.
-
AEM Forms Container 2020-07-15 Display AEM Forms Container Component -
Title Display a page heading -
Text Display a rich text paragraph -
Image Display an image asset -
Button Display a button or anchor button -
Teaser Link an image and text -
Download Display an asset for download -
List Display a list of pages -
Experience Fragment Display an experience fragment -
Content Fragment Display a content fragment asset -
Content Fragment List Display a list of content fragments -
Embed Embed a third-party widget -
PDF Viewer Embed a PDF Viewer widget to display Document Cloud PDF's -
Progress Bar Display a progress indicator -
Social Sharing Add social sharing links -
Separator Display a section divider
- Properties
- Markup
- JSON
- showModificationDate: true
- linkItems: true
- parentPage: /content/core-components-examples/library/page-authoring
- sortOrder: asc
- showDescription: true
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
AEM Forms Container
2020-07-15
Display AEM Forms Container Component
-
Title
Display a page heading
-
Text
Display a rich text paragraph
-
Image
Display an image asset
-
Button
Display a button or anchor button
-
Teaser
Link an image and text
-
Download
Display an asset for download
-
List
Display a list of pages
-
Experience Fragment
Display an experience fragment
-
Content Fragment
Display a content fragment asset
-
Content Fragment List
Display a list of content fragments
-
Embed
Embed a third-party widget
-
PDF Viewer
Embed a PDF Viewer widget to display Document Cloud PDF's
-
Progress Bar
Display a progress indicator
-
Social Sharing
Add social sharing links
-
Separator
Display a section divider
Items displayed as Teasers
The rendering of the list items can be configured to optionally display the items as teasers.
- Properties
- Markup
- JSON
- showModificationDate: true
- linkItems: true
- parentPage: /content/core-components-examples/library/page-authoring
- sortOrder: asc
- displayItemAsTeaser: true
- maxItems: 3
- showDescription: true
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
-
-