List Component
Display dynamic content in a structured, scannable format
This component surfaces collections of related content such as news, events, people, or resources, helping users browse multiple items efficiently.
Example page context showing where a List Component is typically used
✓ Use this component when:
- You need to display a collection of related content items
- Content is managed separately and updated over time
- Users benefit from browsing multiple entries
- Items share consistent metadata (date, title, category, etc.)
✕ Avoid using this component when:
- You are highlighting a single primary feature (use 50/50 Card)
- Content is static and not managed as separate entries
- Items require extensive summaries or imagery
- Layout comparison is more important than listing (use Columns)
Choosing between similar components
If your goal is…
| Your goal | Use this component |
|---|---|
Display multiple content entries | List Component |
Feature one story, event, or initiative | 50/50 Card |
Provide quick links or actions | Button-Style Cards |
Hide and reveal related details | Accordion |
List Component overview
A List component is a dynamic content block that displays items from a specific content type, such as news, resources, or people, in a summary format and layout. List components are often used to highlight content items and provide links to the content.
Example: Displaying recent news items
This example shows a List Component used to display recent news items. Each entry follows a consistent structure, allowing users to scan titles and summaries efficiently.
Accessibility
Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more.
Brand and Identity
Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments.
Elements of a List Component
| Element | Purpose |
|---|---|
Section heading | Displays an optional heading and description contextualizing the set of list items |
Image | Displays the content item thumbnail at the top or left of the list item |
Eyebrow | Displays details about an aspect of the content item depending on the content type, for example, the event date for events |
Heading | Displays the content item heading linked to the content item |
Text | Displays the content item excerpt summary |
Pagination | Provides controls to navigate through list items |
See All link | Links to all associated content items |
Guidance on using a List Component
- Invite exploration. Use a List Component to provide a set of entry points that invite users forward for more details.
- Optimize content items. Use the features of the content type to their best effect. Provide concise headings, engaging thumbnail images, and descriptive excerpts that will be effective when viewed in a List component.
- Optimize space. Use in regions with sufficient space. Avoid using in regions that are narrow due to side navigation or other elements.
- Use pagination. For lists that contain more results than are displayed in the component, provide paging controls or a “Show more” link that dynamically loads additional content items.
Content guidelines
Write concise summaries
Keep summaries short and focused to support scanning.
Use clear, descriptive titles
Titles should communicate the topic without requiring additional explanation.
Avoid redundancy
Do not repeat metadata information in the summary.
Accessibility considerations
- Ensure clear heading hierarchy
- Maintain logical focus order
- Provide descriptive link text for item titles
- Preserve readable contrast for metadata
List Component features
| Feature | Standard |
|---|---|
Optimized color contrast | Minimum Contrast |
Left-aligned headings and text | Text Block Alignment |
Underlining used to indicate links | Link Indicators |
List Component Showcase
This example shows a list of the Design System Standards and Guidelines pages displayed using the list layout option.
Accessibility
Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more.
Brand and Identity
Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments.
Graphic Design
Graphic design standards and guidelines to produce a typographic style that is legible and readable and harmonizes with Harvard’s visual identity.
University Policy
University policy standards and guidelines to support compliance with Harvard’s accessibility and trademark requirements.
This example shows a list of the Design System Standards and Guidelines pages displayed using the grid layout option and “Show More” pagination.
Accessibility
Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more.
Brand and Identity
Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments.
Graphic Design
Graphic design standards and guidelines to produce a typographic style that is legible and readable and harmonizes with Harvard’s visual identity.
This example shows posts from the Insights Blog displayed using the list layout option.
Typographic Scale
Typography influences both readability and engagement. As with a musical scale, a typographic scale provides the basis for creating a harmonious visual structure that conveys the structure and relationships among text elements. For the HarvardSites Drupal...
Color System
A robust color system allows each Harvard School to preserve its unique identity while staying connected to the larger Harvard brand. Our approach prioritizes versatility and user needs, enabling personalized branding that meets accessibility and design...
Autoplaying Hero Background Videos in Digital Design
Autoplaying background videos in hero components have gained popularity in modern web design. Recognizing the need to learn more about this trend in relation to the HarvardSites Design System, the design system team embarked on an investigation to...
