#### Basic

Add `.active` to a `.list-group-item` to indicate the current active selection.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

    <!-- Basic -->
    <ul class="list-group ">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item active">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

#### Links

Change all the `li` tags to `a` tags to convert it into a link

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

    <!-- Links -->
    <div class="list-group ">
        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Cras justo odio</a>
        <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a>
        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        <a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
    </div>

#### Icons

- ###### Messages

  4 New Messages

- ###### Locations

  25 New Travel Locations

- ###### Flexible

  Customization Flexibility

    <!-- Icons -->
    <ul class="list-group list-group-icons-meta">
        <li class="list-group-item list-group-item-action">
            <div class="media">
                <div class="d-flex mr-3">
                    <svg> ... </svg>
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Messages</h6>
                    <p class="mg-b-0">4 New Messages</p>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action active">
            <div class="media">
                <div class="d-flex mr-3">
                    <svg> ... </svg>
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Locations</h6>
                    <p class="mg-b-0">25 New Travel Locations</p>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action">
            <div class="media">
                <div class="d-flex mr-3">
                    <svg> ... </svg>
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Flexible</h6>
                    <p class="mg-b-0">Customization Flexibility</p>
                </div>
            </div>
        </li>
    </ul>

#### Images

- ###### Luke Ivory

  Project Lead

- ###### Sonia Shaw

  Web Designer

- ###### Dale Butler

  Developer

    <!-- Images -->
    <ul class="list-group list-group-media">
        <li class="list-group-item list-group-item-action">
            <div class="media">
                <div class="mr-3">
                    <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Luke Ivory</h6>
                    <p class="mg-b-0">Project Lead</p>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action active">
            <div class="media">
                <div class="mr-3">
                    <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Sonia Shaw</h6>
                    <p class="mg-b-0">Web Designer</p>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-action ">
            <div class="media">
                <div class="mr-3">
                    <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
                </div>
                <div class="media-body">
                    <h6 class="tx-inverse">Dale Butler</h6>
                    <p class="mg-b-0">Developer</p>
                </div>
            </div>
        </li>
    </ul>

#### Task

- List groups are a flexible and powerful component for displaying simple. Project
- List groups are a flexible and powerful component for displaying simple. Urgent
- List groups are a flexible and powerful component for displaying simple. Success

    <!-- Task -->
    <ul class="list-group task-list-group">
        <li class="list-group-item list-group-item-action">
            <div class="n-chk">
                <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
                  <input type="checkbox" class="new-control-input">
                  <span class="new-control-indicator"></span>
                    <span class="ml-2">
                        List groups are a flexible and powerful component for displaying simple.
                    </span>
                    <span class="ml-3 d-block">
                        <span class="badge badge-secondary">Project</span>
                    </span>
                </label>
            </div>
        </li>
        <li class="list-group-item list-group-item-action active">
            <div class="n-chk">
                <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
                  <input type="checkbox" class="new-control-input">
                  <span class="new-control-indicator"></span>
                    <span class="ml-2">
                        List groups are a flexible and powerful component for displaying simple.
                    </span>
                    <span class="ml-3 d-block">
                        <span class="badge badge-primary">Urgent</span>
                    </span>
                </label>
            </div>
        </li>
        <li class="list-group-item list-group-item-action">
            <div class="n-chk">
                <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
                  <input type="checkbox" class="new-control-input">
                  <span class="new-control-indicator"></span>
                      <span class="ml-2">List groups are a flexible and powerful component for displaying simple.</span>
                      <span class="ml-3 d-block">
                          <span class="badge badge-success">Success</span>
                      </span>
                </label>
            </div>
        </li>
    </ul>