List group

React Bootstrap 5 List group component

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Note: Read the API tab to find all available options and advanced customization

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidthL: '22rem' }} light>
      <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
      <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
      <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
      <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
    </MDBListGroup>
  );
}

Small

If you need a more compact list, pass small as prop which will reduce the padding of the items in the list.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light small>
      <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
      <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
      <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
      <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
    </MDBListGroup>
  );
}

Active items

Add active property to a <MDBListGroupItem> to indicate the current active selection.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem active noBorders aria-current='true' className='px-3'>
        Cras justo odio
      </MDBListGroupItem>
      <MDBListGroupItem noBorders className='px-3'>
        Dapibus ac facilisis in
      </MDBListGroupItem>
      <MDBListGroupItem noBorders className='px-3'>
        Morbi leo risus
      </MDBListGroupItem>
      <MDBListGroupItem noBorders className='px-3'>
        Porta ac consectetur ac
      </MDBListGroupItem>
      <MDBListGroupItem noBorders className='px-3'>
        Vestibulum at eros
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

Disabled items

Add disabled property to a <MDBListGroupItem> to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem disabled aria-disabled='true'>
        Cras justo odio
      </MDBListGroupItem>
      <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
      <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
      <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
    </MDBListGroup>
  );
}

No borders

Pass noBorders as a prop to the items to remove all the borders.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem noBorders>Cras justo odio</MDBListGroupItem>
      <MDBListGroupItem noBorders>Dapibus ac facilisis in</MDBListGroupItem>
      <MDBListGroupItem noBorders>Morbi leo risus</MDBListGroupItem>
      <MDBListGroupItem noBorders>Porta ac consectetur ac</MDBListGroupItem>
      <MDBListGroupItem noBorders>Vestibulum at eros</MDBListGroupItem>
    </MDBListGroup>
  );
}

Numbered

Pass numbered as a prop to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list groupt items and allow for better customization.

Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before pseudo-element on the <li> with counter-increment and content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup light numbered style={{ minWidth: '22rem' }}>
      <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
      <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
      <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    </MDBListGroup>
  );
}

These work great with custom content as well.

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14 
import React from 'react';
import { MDBBadge, MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup light numbered style={{ minWidth: '22rem' }}>
      <MDBListGroupItem className='d-flex justify-content-between align-items-start'>
        <div className='ms-2 me-auto'>
          <div className='fw-bold'>Subheading</div>Cras justo odio
        </div>
        <MDBBadge pill light>
          14
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-start'>
        <div className='ms-2 me-auto'>
          <div className='fw-bold'>Subheading</div>Cras justo odio
        </div>
        <MDBBadge pill light>
          14
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-start'>
        <div className='ms-2 me-auto'>
          <div className='fw-bold'>Subheading</div>Cras justo odio
        </div>
        <MDBBadge pill light>
          14
        </MDBBadge>
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

Horizontal

Add horizontal property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant using horizontalSize="sm|md|lg|xl|xxl" to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBListGroup horizontal>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>

      <MDBListGroup horizontal horizontalSize='sm'>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>

      <MDBListGroup horizontal horizontalSize='md'>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>

      <MDBListGroup horizontal horizontalSize='lg'>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>

      <MDBListGroup horizontal horizontalSize='xl'>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>

      <MDBListGroup horizontal horizontalSize='xxl'>
        <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
        <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
        <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
      </MDBListGroup>
    </div>
  );
}

Contextual classes

Use color property to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem noBorders className='px-3 mb-2 rounded-3'>
        Dapibus ac facilisis in
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='primary' className='px-3 mb-2 rounded-3'>
        A simple primary list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='secondary' className='px-3 mb-2 rounded-3'>
        A simple secondary list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='success' className='px-3 mb-2 rounded-3'>
        A simple success list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='danger' className='px-3 mb-2 rounded-3'>
        A simple danger list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='warning' className='px-3 mb-2 rounded-3'>
        A simple warning list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='info' className='px-3 mb-2 rounded-3'>
        A simple info list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='light' className='px-3 mb-2 rounded-3'>
        A simple light list group item
      </MDBListGroupItem>
      <MDBListGroupItem noBorders color='dark' className='px-3 mb-2 rounded-3'>
        A simple dark list group item
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

color property also works with action property. Note the addition of the hover styles here not present in the previous example. Also supported is the active state; apply it to indicate an active selection on a contextual list group item.

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBListGroup style={{ minWidth: '22rem' }} light>
        <MDBListGroupItem tag='a' href='#' action noBorders className='px-3 rounded-3 mb-2'>
          Dapibus ac facilisis in
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='primary' className='px-3 rounded-3 mb-2'>
          A simple primary list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='secondary' className='px-3 rounded-3 mb-2'>
          A simple secondary list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='success' className='px-3 rounded-3 mb-2'>
          A simple success list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='danger' className='px-3 rounded-3 mb-2'>
          A simple danger list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='warning' className='px-3 rounded-3 mb-2'>
          A simple warning list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='info' className='px-3 rounded-3 mb-2'>
          A simple info list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='light' className='px-3 rounded-3 mb-2'>
          A simple light list group item
        </MDBListGroupItem>
        <MDBListGroupItem tag='a' href='#' action noBorders color='dark' className='px-3 rounded-3 mb-2'>
          A simple dark list group item
        </MDBListGroupItem>
      </MDBListGroup>
    </div>
  );
}

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Badges

Add badges to any list group item to show unread counts, activity, and more with the help of some flexbox utilities.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
import React from 'react';
import { MDBListGroup, MDBListGroupItem, MDBBadge } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        Cras justo odio
        <MDBBadge pill light>
          14
        </MDBBadge>
      </MDBListGroupItem>

      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        Dapibus ac facilisis in
        <MDBBadge pill light>
          2
        </MDBBadge>
      </MDBListGroupItem>

      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        Morbi leo risus
        <MDBBadge pill light>
          1
        </MDBBadge>
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

  • John Doe
    john.doe@gmail.com
    Active
  • Alex Ray
    alex.ray@gmail.com
    Onboarding
  • Kate Hunington
    kate.hunington@gmail.com
    Awaiting 
import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div>
          <div className='fw-bold'>John Doe</div>
          <div className='text-muted'>john.doe@gmail.com</div>
        </div>
        <MDBBadge pill light color='success'>
          Active
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div>
          <div className='fw-bold'>Alex Ray</div>
          <div className='text-muted'>alex.ray@gmail.com</div>
        </div>
        <MDBBadge pill light color='primary'>
          Onboarding
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div>
          <div className='fw-bold'>Kate Hunington</div>
          <div className='text-muted'>kate.hunington@gmail.com</div>
        </div>
        <MDBBadge pill light color='warning'>
          Awaiting
        </MDBBadge>
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

Checkboxes

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros 
import React from 'react';
import { MDBListGroup, MDBListGroupItem, MDBCheckbox } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem>
        <MDBCheckbox inline />
        Cras justo odio
      </MDBListGroupItem>

      <MDBListGroupItem>
        <MDBCheckbox inline />
        Dapibus ac facilisis in
      </MDBListGroupItem>

      <MDBListGroupItem>
        <MDBCheckbox inline />
        Morbi leo risus
      </MDBListGroupItem>

      <MDBListGroupItem>
        <MDBCheckbox inline />
        Porta ac consectetur ac
      </MDBListGroupItem>

      <MDBListGroupItem>
        <MDBCheckbox inline />
        Vestibulum at eros
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

And if you want tag="label"s as the <MDBListGroupItem> property for large hit areas, you can do that, too. 

    • import React from 'react';
import { MDBListGroup, MDBListGroupItem, MDBCheckbox } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem tag='label'>
        <MDBCheckbox label='Cras justo odio' />
      </MDBListGroupItem>

      <MDBListGroupItem tag='label'>
        <MDBCheckbox label='Dapibus ac facilisis in' />
      </MDBListGroupItem>

      <MDBListGroupItem tag='label'>
        <MDBCheckbox label='Morbi leo risus' />
      </MDBListGroupItem>

      <MDBListGroupItem tag='label'>
        <MDBCheckbox label='Porta ac consectetur ac' />
      </MDBListGroupItem>

      <MDBListGroupItem tag='label'>
        <MDBCheckbox label='Vestibulum at eros' />
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

    JavaScript behavior

    Use the tab JavaScript plugin to extend our list group to create tabbable panes of local content.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore impedit quibusdam exercitationem eligendi voluptate doloribus non pariatur libero quod nobis mollitia odio dolore eos debitis iure, autem quisquam ullam beatae.
    Ea eos asperiores deserunt reprehenderit voluptatem deleniti dolor iure eum consectetur commodi.
    Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi, dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste assumenda aliquam.
    Praesentium asperiores nemo ratione quas atque excepturi odio aliquid libero, architecto aspernatur expedita, corrupti, rem odit quos exercitationem maxime at. Ex, eveniet rerum laborum accusamus delectus magnam maxime! 
    import React, { useState } from 'react';
import {
  MDBCol,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
  MDBTabs,
  MDBTabsContent,
  MDBTabsItem,
  MDBTabsLink
} from 'mdb-react-ui-kit';

export default function App() {
  const [basicActive, setBasicActive] = useState('home');

  const handleBasicClick = (value: string) => {
    if (value === basicActive) return;

    setBasicActive(value);
  }

  return (
    <MDBRow>
      <MDBCol size={4}>
        <MDBListGroup light small>
          <MDBTabs>
            <MDBListGroupItem action active={basicActive === 'home'} noBorders className='px-3'>
              <MDBTabsItem>
                <MDBTabsLink onClick={() => handleBasicClick('home')}>Home</MDBTabsLink>
              </MDBTabsItem>
            </MDBListGroupItem>
            <MDBListGroupItem action active={basicActive === 'profile'} noBorders className='px-3'>
              <MDBTabsItem>
                <MDBTabsLink onClick={() => handleBasicClick('profile')}>Profile</MDBTabsLink>
              </MDBTabsItem>
            </MDBListGroupItem>
            <MDBListGroupItem action active={basicActive === 'messages'} noBorders className='px-3'>
              <MDBTabsItem>
                <MDBTabsLink onClick={() => handleBasicClick('messages')}>Messages</MDBTabsLink>
              </MDBTabsItem>
            </MDBListGroupItem>
            <MDBListGroupItem action active={basicActive === 'settings'} noBorders className='px-3'>
              <MDBTabsItem>
                <MDBTabsLink onClick={() => handleBasicClick('settings')}>Settings</MDBTabsLink>
              </MDBTabsItem>
            </MDBListGroupItem>
          </MDBTabs>
        </MDBListGroup>
      </MDBCol>

      <MDBCol size={8}>
        <MDBTabsContent>
          <MDBTabsPane open={basicActive === 'home'}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore impedit quibusdam exercitationem
            eligendi voluptate doloribus non pariatur libero quod nobis mollitia odio dolore eos debitis iure,
            autem quisquam ullam beatae.
          </MDBTabsPane>
          <MDBTabsPane open={basicActive === 'profile'}>
            Ea eos asperiores deserunt reprehenderit voluptatem deleniti dolor iure eum consectetur commodi.
          </MDBTabsPane>
          <MDBTabsPane open={basicActive === 'messages'}>
            Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi,
            dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste
            assumenda aliquam.
          </MDBTabsPane>
          <MDBTabsPane open={basicActive === 'settings'}>
            Praesentium asperiores nemo ratione quas atque excepturi odio aliquid libero, architecto aspernatur
            expedita, corrupti, rem odit quos exercitationem maxime at. Ex, eveniet rerum laborum accusamus
            delectus magnam maxime!
          </MDBTabsPane>
        </MDBTabsContent>
      </MDBCol>
    </MDBRow>
  );
}

    Additional examples

    A few additional, practical examples with different types of content and elements.

    Images

    • John Doe

      john.doe@gmail.com

      Active

    • Alex Ray

      alex.ray@gmail.com

      Onboarding

    • Kate Hunington

      kate.hunington@gmail.com

      Awaiting 
    import React from 'react';
import { MDBBadge, MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/8.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>John Doe</p>
            <p className='text-muted mb-0'>john.doe@gmail.com</p>
          </div>
        </div>
        <MDBBadge pill light color='success'>
          Active
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/6.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>Alex Ray</p>
            <p className='text-muted mb-0'>alex.ray@gmail.com</p>
          </div>
        </div>
        <MDBBadge pill light color='primary'>
          Onboarding
        </MDBBadge>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/7.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>Kate Hunington</p>
            <p className='text-muted mb-0'>kate.hunington@gmail.com</p>
          </div>
        </div>
        <MDBBadge pill light color='warning'>
          Awaiting
        </MDBBadge>
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

    Headings

    Marketing team

    • John Doe

      john.doe@gmail.com

    • Alex Ray

      alex.ray@gmail.com

    • Kate Hunington

      kate.hunington@gmail.com

    Design team

    • Soraya Letto

      soraya.letto@gmail.com

    • Zeynep Dudley

      zeynep.dudley@gmail.com

    • Ayat Black

      ayat.black@gmail.com

    import React from 'react';
import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div style={{ minWidth: '22rem' }}>
      <h6 className='bg-light p-2 border-top border-bottom'>Marketing team</h6>
      <MDBListGroup light className='mb-4'>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/8.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>John Doe</p>
              <p className='text-muted mb-0'>john.doe@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/6.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>Alex Ray</p>
              <p className='text-muted mb-0'>alex.ray@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/7.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>Kate Hunington</p>
              <p className='text-muted mb-0'>kate.hunington@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
      </MDBListGroup>

      <h6 className='bg-light p-2 border-top border-bottom'>Marketing team</h6>

      <MDBListGroup light className='mb-4'>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/9.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>Soraya Letto</p>
              <p className='text-muted mb-0'>soraya.letto@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/11.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>Zeynep Dudley</p>
              <p className='text-muted mb-0'>zeynep.dudley@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
        <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
          <div className='d-flex align-items-center'>
            <img
              src='https://mdbootstrap.com/img/new/avatars/15.jpg'
              alt=''
              style={{ width: '45px', height: '45px' }}
              className='rounded-circle'
            />
            <div className='ms-3'>
              <p className='fw-bold mb-1'>Ayat Black</p>
              <p className='text-muted mb-0'>ayat.black@gmail.com</p>
            </div>
          </div>
        </MDBListGroupItem>
      </MDBListGroup>
    </div>
  );
}

    Action buttons

    • John Doe

      john.doe@gmail.com

      View

    • Alex Ray

      alex.ray@gmail.com

      View

    • Kate Hunington

      kate.hunington@gmail.com

      View 
    import React from 'react';
import { MDBBadge, MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBListGroup style={{ minWidth: '22rem' }} light>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/8.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>John Doe</p>
            <p className='text-muted mb-0'>john.doe@gmail.com</p>
          </div>
        </div>
        <MDBBtn size='sm' rounded color='link'>
          View
        </MDBBtn>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/6.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>Alex Ray</p>
            <p className='text-muted mb-0'>alex.ray@gmail.com</p>
          </div>
        </div>
        <MDBBtn size='sm' rounded color='link'>
          View
        </MDBBtn>
      </MDBListGroupItem>
      <MDBListGroupItem className='d-flex justify-content-between align-items-center'>
        <div className='d-flex align-items-center'>
          <img
            src='https://mdbootstrap.com/img/new/avatars/7.jpg'
            alt=''
            style={{ width: '45px', height: '45px' }}
            className='rounded-circle'
          />
          <div className='ms-3'>
            <p className='fw-bold mb-1'>Kate Hunington</p>
            <p className='text-muted mb-0'>kate.hunington@gmail.com</p>
          </div>
        </div>
        <MDBBtn size='sm' rounded color='link'>
          View
        </MDBBtn>
      </MDBListGroupItem>
    </MDBListGroup>
  );
}

    CTA

    • Our company starts its operations

      11 March 2020

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit necessitatibus adipisci, ad alias, voluptate pariatur officia repellendus repellat inventore fugit perferendis totam dolor voluptas et corrupti distinctio maxime corporis optio?

    • First customer

      19 March 2020

      Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed aliquet laoreet sapien, eget pulvinar lectus maximus vel. Phasellus suscipit porta mattis.

    • Our team exceeds 10 people

      24 June 2020

      Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ullamcorper arcu lacus, maximus facilisis erat pellentesque nec. Duis et dui maximus dui aliquam convallis. Quisque consectetur purus erat, et ullamcorper sapien tincidunt vitae.

    View all 
    import React from 'react';
import { MDBBtn, MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div style={{ maxWidth: '22rem' }}>
      <MDBListGroup style={{ minWidth: '22rem' }} light className='mb-3'>
        <MDBListGroupItem>
          <h5 className='fw-bold'>Our company starts its operations</h5>
          <p className='text-muted mb-2 fw-bold'>11 March 2020</p>
          <p className='text-muted mb-0'>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit necessitatibus adipisci, ad alias,
            voluptate pariatur officia repellendus repellat inventore fugit perferendis totam dolor voluptas
            et corrupti distinctio maxime corporis optio?
          </p>
        </MDBListGroupItem>
        <MDBListGroupItem>
          <h5 className='fw-bold'>First customer</h5>
          <p className='text-muted mb-2 fw-bold'>19 March 2020</p>
          <p className='text-muted mb-0'>
            Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed aliquet laoreet sapien, eget
            pulvinar lectus maximus vel. Phasellus suscipit porta mattis.
          </p>
        </MDBListGroupItem>
        <MDBListGroupItem>
          <h5 className='fw-bold'>Our team exceeds 10 people</h5>
          <p className='text-muted mb-2 fw-bold'>24 June 2020</p>
          <p className='text-muted mb-0'>
            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla
            ullamcorper arcu lacus, maximus facilisis erat pellentesque nec. Duis et dui maximus dui aliquam
            convallis. Quisque consectetur purus erat, et ullamcorper sapien tincidunt vitae.
          </p>
        </MDBListGroupItem>
      </MDBListGroup>
      <MDBBtn outline rounded rippleColor='dark' color='dark' className='w-100'>
        View all
      </MDBBtn>
    </div>
  );
}

    Grid list

    John Doe

    john.doe@gmail.com

    Alex Ray

    alex.ray@gmail.com

    Kate Hunington

    kate.hunington@gmail.com

    Soraya Letto

    soraya.letto@gmail.com

    Zeynep Dudley

    zeynep.dudley@gmail.com

    Ayat Black

    ayat.black@gmail.com

    import React from 'react';
import {
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBRow>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/8.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>John Doe</p>
                <p className='text-muted mb-0'>john.doe@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/6.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>Alex Ray</p>
                <p className='text-muted mb-0'>alex.ray@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/7.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>Kate Hunington</p>
                <p className='text-muted mb-0'>kate.hunington@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/9.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>Soraya Letto</p>
                <p className='text-muted mb-0'>soraya.letto@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/11.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>Zeynep Dudley</p>
                <p className='text-muted mb-0'>zeynep.dudley@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={4} lg={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex align-items-center'>
              <img
                src='https://mdbootstrap.com/img/new/avatars/15.jpg'
                alt=''
                style={{ width: '45px', height: '45px' }}
                className='rounded-circle'
              />
              <div className='ms-3'>
                <p className='fw-bold mb-1'>Ayat Black</p>
                <p className='text-muted mb-0'>ayat.black@gmail.com</p>
              </div>
            </div>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
    </MDBRow>
  );
}

    Complex grid list

    John Doe

    john.doe@gmail.com

    Active
    Message Call

    Alex Ray

    alex.ray@gmail.com

    Onboarding
    Message Call

    Kate Hunington

    kate.hunington@gmail.com

    Awaiting
    Message Call

    Michael Bale

    michael.bale@gmail.com

    Removed
    Message Call 
    import React from 'react';
import {
  MDBCard,
  MDBCardBody,
  MDBCardFooter,
  MDBCol,
  MDBIcon,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow
} from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBRow>
      <MDBCol xl={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex justify-content-between align-items-center'>
              <div className='d-flex align-items-center'>
                <img
                  src='https://mdbootstrap.com/img/new/avatars/8.jpg'
                  alt=''
                  style={{ width: '45px', height: '45px' }}
                  className='rounded-circle'
                />
                <div className='ms-3'>
                  <p className='fw-bold mb-1'>John Doe</p>
                  <p className='text-muted mb-0'>john.doe@gmail.com</p>
                </div>
              </div>
              <MDBBadge pill color='success' light>
                Active
              </MDBBadge>
            </div>
          </MDBCardBody>
          <MDBCardFooter background='light' border='0' className='p-2 d-flex justify-content-around'>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Message <MDBIcon fas icon='envelope' />
            </MDBBtn>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Call <MDBIcon fas icon='phone' />
            </MDBBtn>
          </MDBCardFooter>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex justify-content-between align-items-center'>
              <div className='d-flex align-items-center'>
                <img
                  src='https://mdbootstrap.com/img/new/avatars/6.jpg'
                  alt=''
                  style={{ width: '45px', height: '45px' }}
                  className='rounded-circle'
                />
                <div className='ms-3'>
                  <p className='fw-bold mb-1'>Alex Ray</p>
                  <p className='text-muted mb-0'>alex.ray@gmail.com</p>
                </div>
              </div>
              <MDBBadge pill color='primary' light>
                Onboarding
              </MDBBadge>
            </div>
          </MDBCardBody>
          <MDBCardFooter background='light' border='0' className='p-2 d-flex justify-content-around'>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Message <MDBIcon fas icon='envelope' />
            </MDBBtn>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Call <MDBIcon fas icon='phone' />
            </MDBBtn>
          </MDBCardFooter>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex justify-content-between align-items-center'>
              <div className='d-flex align-items-center'>
                <img
                  src='https://mdbootstrap.com/img/new/avatars/7.jpg'
                  alt=''
                  style={{ width: '45px', height: '45px' }}
                  className='rounded-circle'
                />
                <div className='ms-3'>
                  <p className='fw-bold mb-1'>Kate Hunington</p>
                  <p className='text-muted mb-0'>kate.hunington@gmail.com</p>
                </div>
              </div>
              <MDBBadge pill color='warning' light>
                Awaiting
              </MDBBadge>
            </div>
          </MDBCardBody>
          <MDBCardFooter background='light' border='0' className='p-2 d-flex justify-content-around'>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Message <MDBIcon fas icon='envelope' />
            </MDBBtn>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Call <MDBIcon fas icon='phone' />
            </MDBBtn>
          </MDBCardFooter>
        </MDBCard>
      </MDBCol>
      <MDBCol xl={6} className='mb-4'>
        <MDBCard>
          <MDBCardBody>
            <div className='d-flex justify-content-between align-items-center'>
              <div className='d-flex align-items-center'>
                <img
                  src='https://mdbootstrap.com/img/new/avatars/3.jpg'
                  alt=''
                  style={{ width: '45px', height: '45px' }}
                  className='rounded-circle'
                />
                <div className='ms-3'>
                  <p className='fw-bold mb-1'>Michael Bale</p>
                  <p className='text-muted mb-0'>michael.bale@gmail.com</p>
                </div>
              </div>
              <MDBBadge pill color='danger' light>
                Removed
              </MDBBadge>
            </div>
          </MDBCardBody>
          <MDBCardFooter background='light' border='0' className='p-2 d-flex justify-content-around'>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Message <MDBIcon fas icon='envelope' />
            </MDBBtn>
            <MDBBtn color='link' rippleColor='primary' className='text-reset m-0'>
              Call <MDBIcon fas icon='phone' />
            </MDBBtn>
          </MDBCardFooter>
        </MDBCard>
      </MDBCol>
    </MDBRow>
  );
}

    List group - API

    Import

    import { MDBListGroup, MDBListGroupItem } from 'mdb-react-ui-kit';

    Properties

    MDBListGroup

    Name Type Default Description Example
    horizontal Boolean '' Creates a horizontal list group <MDBListGroup horizontal />
    horizontalSize String '' Allows to set a horizontal breakpoint, if the horizontal property is set <MDBListGroup horizontal horizontalSize="lg" />
    light Boolean '' Render an MDBListGroup component without some borders <MDBListGroup light />
    numbered Boolean '' Render an MDBListGroup component with numbered items. <MDBListGroup numbered />
    small Boolean '' Reduce the padding of the items in the list. <MDBListGroup small />
    tag String 'ul' Defines tag of the MDBListGroup element <MDBListGroup tag="ol" />

    MDBListGroupItem

    Name Type Default Description Example
    action Boolean '' Makes an MDBListGroupItem component actionable <MDBListGroupItem action />
    active Boolean '' Adds an .active class to the MDBListGroupItem <MDBListGroupItem active />
    color String '' Sets a color for the MDBListGroupItem component <MDBListGroupItem color="secondary" />
    disabled Boolean '' Disables an MDBListGroupItem component <MDBListGroupItem disabled />
    noBorders Boolean '' Remove all the borders from the item. <MDBListGroupItem noBorders />
    tag String 'li' Defines tag of the MDBListGroupItem element <MDBListGroupItem tag="a" />

    CSS variables

    As part of MDB’s evolving CSS variables approach, list group now uses local CSS variables on .list-group for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

    // .list-group
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

// .list-group-light
--#{$prefix}list-group-light-item-py: #{$list-group-light-item-py};
--#{$prefix}list-group-light-item-border: #{$list-group-light-item-border};
--#{$prefix}list-group-light-item-border-width: #{$list-group-light-item-border-width};
--#{$prefix}list-group-light-active-border-radius: #{$list-group-light-active-border-radius};
--#{$prefix}list-group-light-active-bg: #{$list-group-light-active-bg};
--#{$prefix}list-group-light-active-color: #{$list-group-light-active-color};

// .list-group-small
--#{$prefix}list-group-small-item-py: #{$list-group-small-item-py};

    SCSS variables

    $list-group-border-radius: $border-radius-lg;
$list-group-border-color: rgba($black, 0.125);
$list-group-border-width: $border-width;
$list-group-item-padding-x: 1.5rem;
$list-group-item-padding-y: $spacer * 0.5;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-item-transition-time: 0.5s;
$list-group-color: $body-color;
$list-group-light-item-py: 1rem;
$list-group-light-item-border: 2px solid hsl(0, 0%, 96%);
$list-group-light-item-border-width: 2px;
$list-group-light-active-border-radius: 0.5rem;
$list-group-light-active-bg: rgb(223, 231, 246);
$list-group-light-active-color: rgb(44, 88, 160);
$list-group-small-item-py: 0.5rem;
$list-group-active-bg: rgb(223, 231, 246);
$list-group-active-color: rgb(44, 88, 160);
$list-group-active-border-color: $list-group-active-bg;
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;