List

Components

List

This component is used to present a series of text contents in an orderly and structured manner.

Preview

Figma

Uses

List components are often used to present information in an attractive and organized manner, such as products, services, events or news. List components can also have interactions, such as hover or click, that allow the user to get more information or access more content when they are used in their link version.

When to use

When you have a large number of items and you need to show them in an organized and easily navigable way.

When you want the user to be able to see several items at once without having to scroll through the screen.

When you want the user to be able to select an item from the list.

When not to use

If you only have a few items, it may be more appropriate to display them with another resource instead of using a List component.

If the items in your list are very complex and require a lot of screen space, it may be more appropriate to display them differently, such as on an individual page for each item.

If you need to show items that cannot be displayed in a list, such as charts or maps, it may be better to use another type of component.

Behaviour

Types

Display of a list of value and description

Values

Bullets

Numeric

Link

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

List generates a dl element (description list) that has a semantic meaning in HTML. For this reason, the list component should never be used to display, for example, tabular data.

Keep in mind that Axe Devtools will issue a false warning for this particular component as we use Shadow DOM. This warning can be ignored in the tests.