ListGroup

List group is a flexible component which displays not only simple list of elements but complex custom content.

Examples

Default ListGroup example.

import React from "react";
import { CDBListGroup, CDBListGroupItem, CDBContainer } from "cdbreact";
const LIstGroup = () => {
  return (
    <CDBContainer>
            <CDBListGroup style={{ width: "30rem" }}>
              <CDBListGroupItem>List Group </CDBListGroupItem>
              <CDBListGroupItem>List Group</CDBListGroupItem>
              <CDBListGroupItem>List Group</CDBListGroupItem>
              <CDBListGroupItem>List Group</CDBListGroupItem>
              <CDBListGroupItem>List Group</CDBListGroupItem>
              <CDBListGroupItem>List Group</CDBListGroupItem>
            </CDBListGroup>
    </CDBContainer>
  );
};
export default  LIstGroup;

List Group as Link

import React from "react";
import { CDBListGroup, CDBListGroupItem, CDBContainer } from "cdbreact";
const LIstGroup = () => {
  return (
    <CDBContainer>
            <CDBListGroup style={{ width: "30rem" }}>
              <CDBListGroupItem href="#" active>
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem href="#" hover>
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem href="#" hover>
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem href="#" hover>
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem href="#" hover>
                List Group Link
              </CDBListGroupItem>
              <CDBListGroupItem href="#" hover>
                List Group
              </CDBListGroupItem>
            </CDBListGroup>
    </CDBContainer>
  );
};
export default  LIstGroup;

Label

import React from "react";
import { CDBListGroup, CDBListGroupItem, CDBBadge, CDBContainer } from "cdbreact";
const LIstGroup = () => {
  return (
    <CDBContainer>
            <CDBListGroup style={{ width: "30rem" }}>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group <CDBBadge color="primary">19</CDBBadge>
              </CDBListGroupItem>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group
                <CDBBadge color="secondary">19</CDBBadge>
              </CDBListGroupItem>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group
                <CDBBadge color="success">19</CDBBadge>
              </CDBListGroupItem>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group
                <CDBBadge color="danger">19</CDBBadge>
              </CDBListGroupItem>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group<CDBBadge color="info">19</CDBBadge>
              </CDBListGroupItem>
              <CDBListGroupItem className="d-flex justify-content-between align-items-center">
                List Group<CDBBadge color="warning">19</CDBBadge>
              </CDBListGroupItem>
            </CDBListGroup>
    </CDBContainer>
  );
};
export default  LIstGroup;

Color List Group

import React from "react";
import { CDBListGroup, CDBListGroupItem, CDBContainer } from "cdbreact";
const LIstGroup = () => {
  return (
    <CDBContainer>
            <CDBListGroup style={{ width: "30rem" }}>
              <CDBListGroupItem color="primary">List Group </CDBListGroupItem>
              <CDBListGroupItem color="secondary">List Group</CDBListGroupItem>
              <CDBListGroupItem color="success">List Group</CDBListGroupItem>
              <CDBListGroupItem color="danger">List Group</CDBListGroupItem>
              <CDBListGroupItem color="info">List Group Link</CDBListGroupItem>
              <CDBListGroupItem color="warning">List Group</CDBListGroupItem>
            </CDBListGroup>
    </CDBContainer>
  );
};
export default  LIstGroup;

Icons

import React from "react";
import { CDBListGroup, CDBListGroupItem, CDBIcon, CDBContainer } from "cdbreact";
const LIstGroup = () => {
  return (
    <CDBContainer>
            <CDBListGroup style={{ width: "30rem" }}>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" className="mr-3" />
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" size="2x" className="mr-3" />
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" size="2x" className="mr-3" />
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" size="2x" className="mr-3" />
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" size="2x" className="mr-3" />
                List Group
              </CDBListGroupItem>
              <CDBListGroupItem>
                <CDBIcon fab icon="facebook" size="2x" className="mr-3" />
                List Group
              </CDBListGroupItem>
            </CDBListGroup>
    </CDBContainer>
  );
};
export default  LIstGroup;

API

In this section you will find advanced information about the LIstGroup component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast LIstGroup Import Statement

You need to import the proper Contrast components first.

import { CDBListGroup, CDBListGroupItem, CDBContainer } from "cdbreact";

API Reference: Contrast LIstGroup Properties

The table below shows the configuration options of the CDBLIstGroup component.

API Reference: Contrast LIstGroupItem Properties

The table below shows the configuration options of the CDBLIstGroupItem component.