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.
- Accordion
- Button
- Carousel
- Container
- Content Fragment
- Content Fragment List
- Core Form Container
- Download
- Embed
- Experience Fragment
- Image
- List
- PDF Viewer
- Progress Bar
- Search
- Separator
- Tabs
- Teaser
- Text
- Title
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- parentPage: /content/core-components-examples/library/core-content
- sortOrder: asc
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
Accordion
-
Button
-
Carousel
-
Container
-
Content Fragment
-
Content Fragment List
-
Core Form Container
-
Download
-
Embed
-
Experience Fragment
-
Image
-
List
-
PDF Viewer
-
Progress Bar
-
Search
-
Separator
-
Tabs
-
Teaser
-
Text
-
Title
Built from Fixed List with External Links
List built from a bespoke set of pages and external URLs defined directly in the component edit dialog.
- Carousel
- Teaser
- http://www.adobe.com
- Component Library
- Properties
- Markup
- JSON
- sortOrder: asc
- sling:resourceType: core-components-examples/components/list
- listFrom: static
-
Carousel
-
Teaser
-
http://www.adobe.com
-
Component Library
Built from Search
List built from a search query term under a defined root page.
- Carousel
- 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
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.
- 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
-
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
- Tabs
- Separator
- Search
- Progress Bar
- PDF Viewer
- List
- Image
- Experience Fragment
- Embed
- Download
- Core Form Container
- Content Fragment List
- Content Fragment
- Container
- Carousel
- Button
- Accordion
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- orderBy: title
- parentPage: /content/core-components-examples/library/core-content
- sortOrder: desc
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
Title
-
Text
-
Teaser
-
Tabs
-
Separator
-
Search
-
Progress Bar
-
PDF Viewer
-
List
-
Image
-
Experience Fragment
-
Embed
-
Download
-
Core Form Container
-
Content Fragment List
-
Content Fragment
-
Container
-
Carousel
-
Button
-
Accordion
Max Items
List with the maximum number of items set to 4.
- Accordion
- Button
- Carousel
- Container
- Properties
- Markup
- JSON
- showModificationDate: false
- linkItems: false
- parentPage: /content/core-components-examples/library/core-content
- sortOrder: asc
- maxItems: 4
- showDescription: false
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
Accordion
-
Button
-
Carousel
-
Container
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.
- Accordion Toggle panels of related content
- Button Display a button or anchor button
- Carousel Cycle through content panels
- Container Group and layout components
- Content Fragment Display a content fragment asset
- Content Fragment List Display a list of content fragments
- Core Form Container Group and Layout Form Components
- Download Display an asset for download
- Embed Embed a third-party widget
- Experience Fragment Display an experience fragment
- Image Display an image asset
- List Display a list of pages
- PDF Viewer Embed a PDF Viewer widget to display Document Cloud PDF's
- Progress Bar Display a progress indicator
- Search Search component that displays search results based on the search query
- Separator Display a section divider
- Tabs Switchable content panels
- Teaser Link an image and text
- Text Display a rich text paragraph
- Title Display a page heading
- Properties
- Markup
- JSON
- showModificationDate: true
- linkItems: true
- parentPage: /content/core-components-examples/library/core-content
- sortOrder: asc
- showDescription: true
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
Accordion
Toggle panels of related content
-
Button
Display a button or anchor button
-
Carousel
Cycle through content panels
-
Container
Group and layout components
-
Content Fragment
Display a content fragment asset
-
Content Fragment List
Display a list of content fragments
-
Core Form Container
Group and Layout Form Components
-
Download
Display an asset for download
-
Embed
Embed a third-party widget
-
Experience Fragment
Display an experience fragment
-
Image
Display an image asset
-
List
Display a list of pages
-
PDF Viewer
Embed a PDF Viewer widget to display Document Cloud PDF's
-
Progress Bar
Display a progress indicator
-
Search
Search component that displays search results based on the search query
-
Separator
Display a section divider
-
Tabs
Switchable content panels
-
Teaser
Link an image and text
-
Text
Display a rich text paragraph
-
Title
Display a page heading
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/core-content
- sortOrder: asc
- displayItemAsTeaser: true
- maxItems: 3
- showDescription: true
- sling:resourceType: core-components-examples/components/list
- childDepth: 1
- listFrom: children
-
-
-