List headers

ListHeaders have a variety of styles and support both regular and bare styling. They can be used to give contextual information about what a list contains or to visually separate a subgroup of elements.

• Header
• Headline 1

  Body 1
• Header
• Headline 2

  Body 2
• Header
• Headline 3

  Body 3
• Header
• Headline 4

  Body 3

<List ariaLabel="example">
  <ListHeaderItem headline="Header" />
  <ListItem headline="Headline 1" body="Body 1" />
  <ListHeaderItem
    headline="Header"
    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
  />
  <ListItem headline="Headline 2" body="Body 2" />
  <ListHeaderItem highlight headline="Header" />
  <ListItem headline="Headline 3" body="Body 3" />
  <ListHeaderItem
    highlight
    headline="Header"
    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
  />
  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
</List>

Bare list headers

• Header
• Headline 1

  Body 1
• Header
• Headline 2

  Body 2
• Header
• Headline 3

  Body 3
• Header
• Headline 4

  Body 3

<List bare ariaLabel="example">
  <ListHeaderItem headline="Header" />
  <ListItem headline="Headline 1" body="Body 1" />
  <ListHeaderItem
    headline="Header"
    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
  />
  <ListItem headline="Headline 2" body="Body 2" />
  <ListHeaderItem highlight headline="Header" />
  <ListItem headline="Headline 3" body="Body 3" />
  <ListHeaderItem
    highlight
    headline="Header"
    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
  />
  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
</List>