List of Tagged Items

This page contains examples of the usage of the List component built with "Tags" option.

Each page can be tagged with custom or predefined tags, via page properties. These tags are then used as a filter to build the List results.

• "List Page 1" and "List Page 5" have no tags assigned and therefore should not appear in the resulting lists.
• Tags can follow a tree structure as pages, when selecting a parent tag to be shown, all pages tagged with children tags would be shown as well.

"Load More" is enabled by default with 10 items as the default value for both initial items and page size. 

In this example, the "Match any" option is selected by default and 3 parent tags are selected:

• #cultivate-respect 
• #never-let-the-customer-down
• #never-let-the-team-down

The resulting List contains all pages that were tagged with any of the selected tags or their children tags.

In this example, the "Match all" option is selected by default and 2 parent tags are selected:

• #cultivate-respect 
• #never-let-the-customer-down

The resulting List contains all pages that were tagged with both of the selected tags or their children tags.

In this example, the "tag filter" and "show page count" options are included, allowing the filtering of the resulting list by the selected tag.

"Load More" is applied to the selected tag.

Container and background styles

When the List component is placed inside a container, its styles are adapted to the background colour of the container.