List

List is used to display list items, it renders a <ul> by default.

Import

import { List, ListItem, ListIcon } from '@outfitio/outkit';

Unordered List

Ordered List

Unstyled List with icon

Add nice icons to the list item by using the ListIcon component. You can pass the name of the icon or custom icons. The icon is sized relative to the font size of the list item.

<List spacing={3}>
  <ListItem>
    <ListIcon icon="check-circle" color="success.500" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </ListItem>
  <ListItem>
    <ListIcon icon="check-circle" color="success.500" />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </ListItem>
  <ListItem>
    <ListIcon icon="check-circle" color="success.500" />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
  {/* You can also use custom icons from react-icons */}
  <ListItem>
    <ListIcon icon={MdSettings} color="success.500" />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
</List>

Props

List Props

List Item Props

ListItem composes PseudoBox so you pass all style props, and pseudo style props.