List

Design File

Figma link

Introduction

The list component is used to display a collection of items in a vertical list format. It is well-suited for news listings, blog posts, or other content where items are displayed one after another with an image, date, and brief description.

Component Structure

Slots

Field	Data Type	Requirement	Description	Note
Eyebrow Text	String	Optional	A short label displayed above the title, used for category or content type.	Recommended to limit to 30 characters.
List Title	String	Required	The title of the list item.	Recommended to limit to 100 characters for optimal display.
List URL	String	Required	The link for the list item title.
List Description	WYSIWYG	Optional	A brief description of the list item.	Use plain text format. Avoid adding links or complex formatting.
Date	Date	Optional	The date associated with the list item.	Use the format "Month Date, Year" (e.g., "July 4, 2025").
List Image	Media Image URL	Optional	A thumbnail image for the list item.
List Image Alt Text	String	Conditional	Alt text for the list item image.	Required if List Image is used.

Props

Field	Data Type	Requirement	Description	Note
Heading Level	String	Required	The HTML heading level for the list item title.	Options: h2–h6. Defaults to h2. Choose based on the heading hierarchy of the page.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.