<ul class="list-unstyled js-contact-list mb-0">
    <!-- Contact -->
    <li class="card contact-item active mb-3">
        <a href="documentation/contacts.html" class="contact-link"></a>
        <div class="card-body">
            <div class="d-flex align-items-center">
                <!-- Avatar -->
                <div class="avatar avatar-online me-4">
                    <span class="avatar-label bg-soft-primary text-primary">AM</span>
                </div>
                <!-- Avatar -->

                <!-- Content -->
                <div class="flex-grow-1 overflow-hidden">
                    <div class="d-flex align-items-center mb-1">
                        <h5 class="text-truncate mb-0 me-auto">Ariel Martinez</h5>
                        <p class="small text-body-secondary text-nowrap ms-4 mb-0">8:12 AM</p>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="line-clamp me-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium fugiat eligendi blanditiis enim.
                        </div>
                        <span class="badge rounded-pill bg-primary ms-2">2</span>
                    </div>
                </div>
                <!-- Content -->
            </div>
        </div>
    </li>
    <!-- Contact -->

    <!-- Contact -->
    <li class="card contact-item">
        <a href="documentation/contacts.html" class="contact-link"></a>
        <div class="card-body">
            <div class="d-flex align-items-center">
                <!-- Avatar -->
                <div class="avatar avatar-online me-4">
                    <span class="avatar-label bg-soft-success text-success">KC</span>
                </div>
                <!-- Avatar -->

                <!-- Content -->
                <div class="flex-grow-1 overflow-hidden">
                    <div class="d-flex align-items-center mb-1">
                        <h5 class="text-truncate mb-0 me-auto">Katherine Cassidy</h5>
                        <p class="small text-body-secondary text-nowrap ms-4 mb-0">1:30 PM</p>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="line-clamp me-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium fugiat eligendi blanditiis enim.</div>
                    </div>
                </div>
                <!-- Content -->
            </div>
        </div>
        <div class="card-footer d-flex align-items-center justify-content-between overflow-hidden">
            <h5 class="mb-0 text-truncate">Design Team</h5>
            <p class="mb-0 small text-body-secondary text-nowrap">15 Members</p>
        </div>
    </li>
    <!-- Contact -->
</ul>