#List

A semantic ul or ol with its spacing and markers under control — reach for ordered only when the sequence matters, and for a Table as soon as each item carries fields of its own. Markers are off by default and role="list" is set either way, so a list without bullets is still a list to a screen reader.

Source · Storybook

#Usage

import { List, ListItem } from '@wallarm-org/design-system/List';

#Examples

#Ordered

variant='ordered' changes the element to ol; the numbers themselves come from marker='decimal', which is a separate decision from the element.

#With disc

marker='disc' turns the bullets on and indents the list by 24px to make room for them.

#With icons

ListIcon puts a meaningful glyph where the marker would be, coloured by what the row says; ListItem is a flex row, so the icon and its text share a baseline.

#Spacing

Three of the seven spacing steps. The gap sits between items only, so a wrapped item keeps its own lines tight while the list stays loose.

#Props

#ListIcon

#ListItem

#Explorer