List With Image

by Ratanak Serey

HTML

<script src="https://getdrawings.com/free-icon/avatar-icon-images-65.png"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<div class="card-body">
                                        <h6 class="text-muted text-uppercase font-size-md opacity-7 mb-3 font-weight-normal">Highlights</h6>
                                        <div class="border-light card-border scroll-area-sm card">
                                            <div class="scrollbar-container ps ps--active-y">
                                                <ul class="list-group list-group-flush">
                                                    <li class="list-group-item">
                                                        <div class="widget-content p-0">
                                                            <div class="widget-content-wrapper">
                                                                <div class="widget-content-left mr-3">
                                                                    <img width="38" class="rounded-circle" src="https://getdrawings.com/free-icon/avatar-icon-images-65.png" alt="">
                                                                </div>
                                                                <div class="widget-content-left">
                                                                    <div class="widget-heading">Beck Collier</div>
                                                                    <div class="widget-subheading mt-1 opacity-10">
                                                                        <div class="badge badge-pill badge-primary">$152</div>
                                                                    </div>
                                                                </div>
                                                                <div class="widget-content-right">
                                     ...

CSS

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}
.font-size-md {
    font-size: .9rem !important;
}
.opacity-7 {
    opacity: .7 !important;
}

.text-muted {
    color: #6c757d !important;
}
.font-weight-normal {
    font-weight: 400 !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
/* .scroll-area-sm {
    height: 200px;
    overflow-x: hidden;
} */

.card-border {
    box-shadow: 0 0 0 transparent;
    border-width: 1px;
}
.card {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03);
    border-width: 0;
    transition: all .2s;
}

.border-light {
    border-color: #eee !important;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26,54,126,0.125);
    border-radius: .25rem;
}
.scrollbar-sidebar, .scrollbar-container {
    position: relative;
    height: 100%;
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    touch-action: auto;
}
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-flush:first-child .list-group-item:first-child {
    border-top: 0;
}
.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.125);
}
.widget-content {
    padding: 1rem;
    flex-direction: row;
    align-items: center;
}

.p-0 {
    padding: 0 !important;
}
.widget-content .widget-content-wrapper...