<ul class="list-group">
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round secondary-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round success-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round ternary-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round danger-bg-color"></span>
        </div>
        You have new Notification
    </li>

</ul>