<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter