List

The List component is used to represent data in a list, it has several components that can be used to create rich experiences within it.

Base list

The default list style has round borders and high contrast background. It can opt out of the roundedness (for example it is useful to go edge-to-edge on small displays) and it also support a bare style, with much more subtle styling.

• Headline

  Body
• Positive button
• Secondary button
• Negative button
• Selected link
• Link

<List ariaLabel="example">
  <ListItem
    headline="Headline"
    body="Body"
    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
    addOnPosition="start"
  />
  <ListButtonItem
    color="positive"
    headline="Positive button"
    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="secondary"
    headline="Secondary button"
    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="negative"
    headline="Negative button"
    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListLinkItem
    href="/"
    color="secondary"
    headline="Selected link"
    selected
    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
    addOnPosition="start"
  />
  <ListLinkItem
    href="/"
    color="secondary"
    headline="Link"
    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
    addOnPosition="start"
    withDivider={false}
  />
</List>

• Headline

  Body
• Positive button
• Secondary button
• Negative button
• Selected link
• Link

<List carded={false} ariaLabel="example">
  <ListItem
    headline="Headline"
    body="Body"
    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
    addOnPosition="start"
  />
  <ListButtonItem
    color="positive"
    headline="Positive button"
    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="secondary"
    headline="Secondary button"
    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="negative"
    headline="Negative button"
    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListLinkItem
    href="/"
    color="secondary"
    headline="Selected link"
    selected
    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
    addOnPosition="start"
  />
  <ListLinkItem
    href="/"
    color="secondary"
    headline="Link"
    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
    addOnPosition="start"
    withDivider={false}
  />
</List>

Bare list

The bare list, like other components that support the bare style, is much more subtle, has less contrast and no borders. For elements that are constantly on display but may not always be necessary (for example navigation elements) it could be preferred to make the user interface cleaner and lighter.

• Headline

  Body
• Positive button
• Secondary button
• Negative button
• Selected link
• Link

<List bare ariaLabel="example">
  <ListItem
    headline="Headline"
    body="Body"
    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
    addOnPosition="start"
  />
  <ListButtonItem
    color="positive"
    headline="Positive button"
    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="secondary"
    headline="Secondary button"
    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListButtonItem
    color="negative"
    headline="Negative button"
    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
    addOnPosition="start"
    onClick={() => {}}
  />
  <ListLinkItem
    href="/"
    color="secondary"
    headline="Selected link"
    selected
    addOn={<Icon color="highlight" icon="fa-renren" size="medium" />}
    addOnPosition="start"
  />
  <ListLinkItem
    href="/"
    headline="Link"
    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
    addOnPosition="start"
    withDivider={false}
  />
</List>

Sublist

• Sublist
• Headline 1

  Body 1
• Headline 2

  Body 2
• Headline 3

  Body 3

<List bare ariaLabel="example">
  <Sublist label="Sublist">
    <ListItem headline="Headline 1" body="Body 1" />
    <ListItem headline="Headline 2" body="Body 2" />
    <ListItem headline="Headline 3" body="Body 3" />
  </Sublist>
</List>

Keyboard navigation

Lists support keyboard navigation by default via the useNavigation hook. It can be disabled by passing the prop navigation and tries to emulate the grid layout spec:

• Headline 1
• Headline 2
• Headline 3

• Headline 1
• Headline 2
• Headline 3

<List ariaLabel="example" navigation={true}>
  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
  <ListButtonItem
    withDivider={false}
    color="secondary"
    headline="Headline 3"
    onClick={() => {}}
  />
</List>

<List ariaLabel="example" navigation={false}>
  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
  <ListButtonItem
    withDivider={false}
    color="secondary"
    headline="Headline 3"
    onClick={() => {}}
  />
</List>