List Component

How to add a List component

The following instructions apply to list components, including Publication List, Class List, Event List, News List, FAQ List, Page List, Person List, and Resource List.

Step 1: Add and configure List component

Add a List component (see Adding a component for instructions on how to add a component).
Select the Settings tab.
Select a layout option from the Display Style menu. Note that options vary based on the content type. See Configuring component design for more details:
1. List or Standard: Content in a list.
2. Grid: Content arranged in a grid.
3. Carousel: Content displayed as a carousel.
4. Compact: Content displayed in a condensed way. This helps you create lists that reduces vertical spacing and scrolling.

Screenshot of Field Display section with checkboxes to choose fields. Name is disabled, Email is not selected, and Professional Title, Image, and Excerpt are selected. — Select the fields to display in the list block using the checkboxes. Note that field options vary depending on the content type — this example is for the Person content type — and disabled checkboxes denote required fields.

Select the fields to display from the Field Display section. Different options will be available depending on the component. Fields that are disabled are required for the component.
To feature a specific News item at the start of a News List component, use the Featured Item autocomplete input to locate and select the News item. (Note that the Featured Item field is available for Standard, Compact, and Grid display styles, only for the News content type.)
Choose a pagination style from the Pager Style menu:
1. No Pager: Do not provide pagination controls on the list component.
2. Standard Pager: Provide standard pagination controls to allow users to navigate through list items.
3. Show More: Provide a Show More button to allow users to load additional list items on the page.
Enter the number of content items to display initially in the list component in the Number of Items Shown input. For a Grid layout, we recommend setting the value to multiples of three (for example, 3 or 6) for a symmetrical grid.
Choose from the No Results Behavior options whether to Hide Block or Show “no results” message. This affects what shows when the list component does not have any content that matches the designated filters.
1. If you choose not to show the block when there are no results, you have the option to enter a custom message in the No Results Message text editor. Otherwise the block will not display at all.
If you would like to display a View All link for the list component, select Show View All Link and provide the following details:
1. Link text: Text describing the link destination, for example, “See All News”. Avoid generic link text such as “See All” or “Learn More”.
2. URL: The link destination. This can be either the title of other site content or an external URL.
Add an optional Page Anchor Link to allow for links to the List component (see instructions under Linking to page content).
Select the Section Heading tab to add an optional section that appears at the top of the List component (see Adding a component heading for details about adding a section heading).
Select the Color Settings tab.
Select from the Color Scheme menus:
1. Component Color Scheme: Background and foreground colors for the overall component.
2. Card Color Scheme: Background and foreground colors for cards.
Review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Choose filter and sort options and save component

Select the Filters tab.
Select the option to Include content based on taxonomy terms and other criteria.
Review the available taxonomy vocabularies for the content type and locate the input for the vocabulary you would like to use to filter content.
1. Enter the term to filter the content, for example, “Faculty” to list Person content assigned the “Faculty” term from the Person Categories vocabulary.
2. Add other terms to apply additional filters as needed. To add multiple filters for the same vocabulary, separate terms with a comma, for example, “Faculty, Staff”. Note that the filter fields are “autocomplete” inputs. Type a few letters and then select your term from the dropdown list of matching terms.

Screenshot of Filters section with radio button to include content based on taxonomy terms selected and Person Categories autocomplete input outlined and the term Faculty selected. — Select the option to **Include content based on taxonomy terms and other criteria** and use the autocomplete inputs to choose taxonomy terms.

Choose the content sort order from the Sort By menu. The available options depend on the content type and commonly include alphabetical and reverse alphabetical. Some list components, such as Events and News, include date options.
As an alternative to using taxonomy terms, List Components also offer the option to list specific content manually.
1. Select the option to Choose content items manually.
2. Use the autocomplete input to locate a specific content item for the content type, for example, a specific person for a Person List.
3. Add and organize additional content.
4. Select the Add another item control to add another content item for the content type.
5. Use the Move control to drag and reorder content items.