List

The <List /> component is used to display a collection of items in either an unordered (<ul>) or ordered (<ol>) format. It supports custom rendering for each list item and flexible styling options.

Show codeCopy code

The listStyle prop allows you to choose between different list styles:

• none: Removes default list styling.
• initial: Uses the default styling for the list type.

Show codeCopy code

The gap prop controls the space between list items. You can specify the gap size using EDS's spacing tokens small, medium, large, etc. See props for a full list.

Show codeCopy code

The following example shows how to utilise <List/> to create more complex UI patterns.

Note: Using the ‘none’ value with the ‘listStyle’ prop will allow you to compose advanced list items.

Show codeCopy code