List

Collection of related items.

Figma componentStorybook documentation

This is a list of items

Use this component for consistent

Spacing and styling

React

<List>
  <ListItem icon={{/* insert icon */}}>This is a list of items</ListItem>
  <ListItem>Use this component for consistent</ListItem>
  <ListItem>Spacing and styling</ListItem>
</List>

CSS

<div class="list">
  <p class="list_item">
    <!-- insert icon -->
    This is a list of items
  </p>
  <p class="list_item">Use this component for consistent</p>
  <p class="list_item">Spacing and styling</p>
</div>

Props

Dense

This is a dense list

The space between items

And font size are smaller

React

<List dense>
  <ListItem>This is a dense list</ListItem>
  <ListItem>The space between items</ListItem>
  <ListItem>And font size are smaller</ListItem>
</List>

CSS

<div class="list list-dense">
  <p class="list_item">This is a dense list of items</p>
  <p class="list_item">Where the spacing</p>
  <p class="list_item">And the font are smaller</p>
</div>