Visual List components represent a collection of items in an organized grid. They can be used to display content as cards or tiles and may contain text or image elements, or both.
The Visual List component should be used to improve the visual comprehension of the content being displayed. Since Visual Lists have a uniform container size, ratio, and padding, they are best used to display items of equal importance.
The styles of the Visual List component allows authors to display pages with thumbnail images (in a 16:9 format) or text-based cards.
The Visual List component can be used to create a dynamic list of child pages or a static list of arbitrarily defined items. The content author can select from available list types and decide how they would like to format the list elements in the configure dialogs.
View on public site:
The configure dialog allows the content author to configure the list and the list items.
The list can be built in different ways.
Regardless of how the list is built, there are Sort and ID Options that can always be configured.
Depending on how the content author chooses to build the list, the additional configuration options will change.
The list can be built of the child pages of the current page or another page.
Options for Child Pages:
The list can be built using a fixed list of items. Click the Add button to inset a new item to the list.
Options for Fixed List:
Metadata:
Once more than one item is created for the list you can arrange the list by:
The list can be built using pages that match certain tags under a particular location.
Options for Tags:
Regardless of how you choose to build the list, there are certain sorting options that can always be defined.
Page Tags: Select the parent type of tag that will show as labels on list items.
Max Items: Maximum number of items displayed in the list.
Order by: How the list can be ordered.
Sort Order: The order in which the items will be arranged.
Tabs by: Select a property to display the list in tabs. The tab titles will be built using the years of the option chosen.
Show "All" tab: When checked, the "All" tab is displayed when building tabs.
Using the Item Settings tab, the formatting of the list elements can be configured.
This configuration dialog tab contains certain settings regarding labels to be added or excluded within the text list component. These include checkboxes where a content author can:
Using the Filtering tab, content authors have the option to apply filters to the list of items or insert a search box.
Show text search filter: When checked, a search box will display above the list.
Text search placeholder: Insert a placeholder label to display in the search box when empty.
Filters: Add the tags that will act as filters to narrow down the list for users.
Using the Styles tab, the style and display of the list elements can be configured.
Style: Choose how to display the visual list. The options include:
Labels: Choose whether or not to display tags in the list.
Expand the section below to see the Visual List component's HTML output.
<div class="tagcloud aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--default--7">
<div class="uscb-tag-cloud-header">
This story was filed under:
</div>
<br>
<div class="uscb-tag-cloud-rectangle">
<a href="/newsroom/blogs/director.html?tagfilter_List_556646074=Census:Topic/research/statistical-methods/administrative-records#List_556646074" class="uscb-tag-cloud-links" onclick="linkClick(this, 'Tag Cloud Component');">
Administrative Records
</a>
</div>
<div class="uscb-tag-cloud-rectangle">
<a href="/newsroom/blogs/director.html?tagfilter_List_556646074=Census:Topic/census-operations#List_556646074" class="uscb-tag-cloud-links" onclick="linkClick(this, 'Tag Cloud Component');">
Census Operations
</a>
</div>
<div class="uscb-tag-cloud-rectangle">
<a href="/newsroom/blogs/director.html?tagfilter_List_556646074=Census:Topic/Industry/information-communication-technology#List_556646074" class="uscb-tag-cloud-links" onclick="linkClick(this, 'Tag Cloud Component');">
Information and Communication Technology
</a>
</div>
</div>