What is it?
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.
Note: Multiple list items should be placed in a grid layout container.
Elements
- Section header (optional): Displays a heading for what the section is about.
- Section subheading text (optional): Supporting description contextualizing the set of list items.
- Heading: Displays the content item heading linked to the content item.
- Text: Displays the content item excerpt summary.
- Call to action(s): Links to more details about the topic.
- Image (optional): Displays to the right of the content.
How do you use it?
- Provide clear entry points that encourage users to explore related content or topics.
- Optimize each content item with concise headings, engaging images, and descriptive excerpts to draw interest.
- Use this component in areas with sufficient space; avoid narrow layouts that limit readability or visual balance.
- Include pagination or “Show more” links to manage long lists and maintain an organized, user-friendly layout.