List

Text only

<List>
  <ListItem>Berlin, Germany</ListItem>
  <ListItem>London, UK</ListItem>
  <ListItem>Strasbourg, France</ListItem>
  <ListItem>Buenos Aires, Argentina</ListItem>
</List>

Two lines

<List>
  <ListItem>
    <ListItemText>
      Berlin
      <ListItemTextSecondary> Germany </ListItemTextSecondary>
    </ListItemText>
  </ListItem>
{/* ... */}

Dense

<List dense>
  <ListItem>Berlin, Germany</ListItem>
  <ListItem>London, UK</ListItem>
  <ListItem>Strasbourg, France</ListItem>
  <ListItem>Buenos Aires, Argentina</ListItem>
</List>

Details

<List style={{maxWidth: '400px'}}>
  <ListItem>
    <Icon name="star"/>
    Berlin, Germany
    <Icon name="check"/>
  </ListItem>
  <ListItem>
    <Icon name="access_time"/>
    London, UK
    <Icon name="check"/>
  </ListItem>
{/* ... */}

Dividers

{/* Without inset */}
<ListItem>Berlin, Germany</ListItem>
<ListDivider/>
<ListItem>Strasbourg, France</ListItem>
<ListDivider/>

{/* Inset  */}
<ListItem><Icon name="favorite_border"/>Berlin, Germany</ListItem>
<ListDivider inset />
<ListItem><Icon name="favorite_border"/>London, UK</ListItem>
<ListDivider inset />

Groups

<ListGroup>
  <ListHeader>By city</ListHeader>
  <List>
    <ListItem>Berlin, Germany</ListItem>
    <ListItem>London, UK</ListItem>
    <ListItem>Strasbourg, France</ListItem>
    <ListItem>Buenos Aires, Argentina</ListItem>
  </List>
  <ListDivider />
  <ListHeader>By planet</ListHeader>
  <List>
    <ListItem>Mercury</ListItem>
    <ListItem>Venus</ListItem>
    <ListItem>Earth</ListItem>
    <ListItem>Mars</ListItem>
  </List>
</ListGroup>