# List Component ## expand\_more Purpose of the 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. ![List component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/listing.png?itok=pz8p3Ig1) *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… SortYour goalUse this componentDisplay 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)Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more. ![Icon showing the silhouette of a person standing with outstretched arms.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Accessibility.png?itok=mwBDPyLC) [### Brand and Identity ](/brand-and-identity)Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments. ![Icon showing a checkmark surrounded by a circle with scalloped edges. ](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Branding.png?itok=dXfmZDtF) Show morerefresh ## Elements of a List Component SortElementPurposeSection 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 SortFeatureStandardOptimized color contrast Minimum Contrast Left-aligned headings and text Text Block Alignment Underlining used to indicate links Link Indicators See also:- [ Components ](/page-categories/components) ## List Component Showcase ### Page List displayed as a list expand\_more This example shows a list of the Design System Standards and Guidelines pages displayed using the list layout option. [### Accessibility ](/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. ![Icon showing the silhouette of a person standing with outstretched arms.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Accessibility.png?itok=mwBDPyLC) [### Brand and Identity ](/brand-and-identity)Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments. ![Icon showing a checkmark surrounded by a circle with scalloped edges. ](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Branding.png?itok=dXfmZDtF) [### Graphic Design ](/graphic-design)Graphic design standards and guidelines to produce a typographic style that is legible and readable and harmonizes with Harvard’s visual identity. ![Icon showing an uppercase T enclosed in a square frame with handles at each corner.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Graphic%20Design.png?itok=WZmsHydW) [### University Policy ](/university-policy)University policy standards and guidelines to support compliance with Harvard’s accessibility and trademark requirements. ![Icon showing a shield.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_University%20Policy.png?itok=2RYjt7c_) ### Page List displayed as a grid with pagination expand\_more 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)Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more. ![Icon showing the silhouette of a person standing with outstretched arms.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Accessibility.png?itok=mwBDPyLC) [### Brand and Identity ](/brand-and-identity)Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments. ![Icon showing a checkmark surrounded by a circle with scalloped edges. ](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Branding.png?itok=dXfmZDtF) [### Graphic Design ](/graphic-design)Graphic design standards and guidelines to produce a typographic style that is legible and readable and harmonizes with Harvard’s visual identity. ![Icon showing an uppercase T enclosed in a square frame with handles at each corner.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Graphic%20Design.png?itok=WZmsHydW) Show morerefresh ### News List displayed as a list expand\_more This example shows posts from the Insights Blog displayed using the list layout option. [### Typographic Scale ](/news/2025/05/typographic-scale) May 02, 2025 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... ![ Icon with “Aa” pairs, a line height arrow, and a list of text styles from Heading 1 to body text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-05/DS_insights_typographic_scale_0.png?itok=srVrmdCp) [### Color System ](/news/2025/04/color-system) April 29, 2025 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... ![A sketch that represents the HarvardSites Design System color assignment.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/DS_Color_Thumbail_0.png?itok=-CGhe91A) [### Autoplaying Hero Background Videos in Digital Design ](/news/2025/02/autoplaying-hero-background-videos-digital-design) February 24, 2025 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... ![Mockup of hero component](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-05/DS_Hero_video_Mockup_0.png?itok=z0yXgx9B)