ListGroup - Graylog2 Server

Normal List

import { ListGroup, ListGroupItem } from 'components/bootstrap';

<ListGroup>
  <ListGroupItem>Item 1</ListGroupItem>
  <ListGroupItem>Item 2</ListGroupItem>
  <ListGroupItem>Item 3</ListGroupItem>
</ListGroup>;

Linked Items

import { ListGroup, ListGroupItem } from 'components/bootstrap';

<ListGroup>
  <ListGroupItem href="#">Link 1</ListGroupItem>
  <ListGroupItem href="#">Link 2</ListGroupItem>
  <ListGroupItem href="#">Link 3</ListGroupItem>
</ListGroup>;

Stateful Items

import { ListGroup, ListGroupItem } from 'components/bootstrap';

<ListGroup>
  <ListGroupItem href="#" active>
    Link 1
  </ListGroupItem>
  <ListGroupItem href="#">Link 2</ListGroupItem>
  <ListGroupItem href="#" disabled>
    Link 3
  </ListGroupItem>
</ListGroup>;

Variant Items

import { ListGroup, ListGroupItem } from 'components/bootstrap';
const styles = ['Danger', 'Warning', 'Success', 'Info'];

<ListGroup componentClass="ol">
  {styles.map((style, i) => (
    <ListGroupItem key={`lgi-${style}`} bsStyle={style.toLowerCase()} listItem>
      {i + 1}&#41; {style}
    </ListGroupItem>
  ))}
</ListGroup>;

w/ Headers

import { ListGroup, ListGroupItem } from 'components/bootstrap';

<ListGroup>
  <ListGroupItem header="Heading 1">Some body text</ListGroupItem>
  <ListGroupItem header="Heading 2" href="#">
    Linked item
  </ListGroupItem>
  <ListGroupItem header="Heading 3" bsStyle="danger">
    Danger styling
  </ListGroupItem>
</ListGroup>;