#  List Component 

 



 ##  

  expand\_more  

 
  

 

## How to add a List component

1. 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

1. Add a List component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Settings** tab.
3. Select a layout option from the **Display Style** menu. Note that options vary based on the content type. See [Configuring component design](/configuring-component-design "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](/news/2026/04/more-compact-way-display-lists "A more compact way to display lists"). This helps you create [lists that reduces vertical spacing and scrolling](/resource/using-compact-view-list-components-save-vertical-space "Using compact view in list components to save vertical space").

   ![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. ](/sites/g/files/omnuum1651/files/styles/hwp_1_1__360x360_scale/public/2024-07/Field%20display%20options.png?itok=d3SV8Z4c) 

 

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.4. 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.
5. 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.)
6. 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.
7. 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.
8. 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.
9. 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.
10. Add an optional **Page Anchor Link** to allow for links to the List component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
11. Select the **Section Heading** tab to add an optional section that appears at the top of the List component (see [Adding a component heading](/adding-section-heading "Adding a section heading") for details about adding a section heading).
12. Select the **Color Settings** tab.
13. 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.
14. 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

1. Select the **Filters** tab.
2. Select the option to **Include content based on taxonomy terms and other criteria**.
3. 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.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-07/Terms%20filter%20options.png?itok=tDPt7UzB) 

 

Select the option to **Include content based on taxonomy terms and other criteria** and use the autocomplete inputs to choose taxonomy terms.4. 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.
5. 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.

   ![Screenshot of Filters section with radio button to choose content items manually selected and Content items section autocomplete input outlined and the person Grace Chan selected.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-07/Manual%20filter%20options.png?itok=r5c-7FFt) 

 

Select the option to **Choose content items manually** and use the autocomplete inputs to choose content items using the content title.6. Once you have finished configuring filters and sort options, choose **Save** to save the List component.



 

---

 

##  Learn more about List components 

 



 ### Examples

Demo Site

See an example of a [Class List](https://drupaldemo.harvardsites.harvard.edu/undergraduate#example-class-list), [Events List](https://drupaldemo.harvardsites.harvard.edu/news-events#example-events-list), [FAQ List](https://drupaldemo.harvardsites.harvard.edu/faqs#example-faq-list), [News List](https://drupaldemo.harvardsites.harvard.edu/news-events#example-news-list), [Person List](https://drupaldemo.harvardsites.harvard.edu/#example-person-list), [Page List](https://drupaldemo.harvardsites.harvard.edu/topic-areas#example-page-list), [Publication List](https://drupaldemo.harvardsites.harvard.edu/people/maya-sharma#example-publications-list), and [Resources List](https://drupaldemo.harvardsites.harvard.edu/resources#example-resource-list) on the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Best Practices

Design System Website

Learn [best practices for using List components](https://designsystem.harvardsites.harvard.edu/list-component) from the Harvard Digital Design System website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew_0.png?itok=qf89ktBL) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [writing helpful alt text to describe images](https://accessibility.huit.harvard.edu/describe-content-images) from the Harvard Digital Accessibility website.



 

   ![Icons for touch, sight, accessibility, cognition, and hearing](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)