ListItem

The ListItem is the basis for rendering multiple items in a list. It uses a flat layer as base. Inside a list item one can basically render anything, for example some text, icons or an image.

The ListItem can render additional content, that always floats to the left or the right of the list item.

Example

<Layer.Base>
  <Spacings.Inset scale="big">
    <Spacings.Stack scale="big">
      <ListItem>Just a list item.</ListItem>
      <ListItem left={<KeyboardArrowLeftIcon />}>
        A list item with left content.
      </ListItem>
      <ListItem right={<KeyboardArrowLeftIcon />}>
        A list item with right content.
      </ListItem>
      <ListItem
        left={<KeyboardArrowLeftIcon />}
        right={<KeyboardArrowLeftIcon />}
      >
        A list item with both left and right content.
      </ListItem>
      <ListItem
        left={<KeyboardArrowLeftIcon />}
        right={<KeyboardArrowLeftIcon />}
      >
        <Spacings.Stack>
          <Text textStyle="headline4">Yet another list item.</Text>
          <Text textStyle="caption">
            This time with multiple lines of text.
          </Text>
        </Spacings.Stack>
      </ListItem>
    </Spacings.Stack>
  </Spacings.Inset>
</Layer.Base>