Notifications

<ul class="list list-divided list-flush">
  <li>
    <div class="list-row">
      <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)" title="Theo Okafor">TO</span>
      <span class="notif-text"><span><b>Theo Okafor</b> approved the plan</span><small>2 min ago</small></span>
    </div>
  </li>
  <li>
    <div class="list-row">
      <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)" title="Hana Sato">HS</span>
      <span class="notif-text"><span><b>Hana Sato</b> mentioned you</span><small>1 hour ago</small></span>
    </div>
  </li>
  <li>
    <div class="list-row">
      <span class="icon-tile success"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
      <span class="notif-text"><span><b>New order</b> #11330 for $204.12</span><small>Today, 10:02</small></span>
    </div>
  </li>
</ul>

<button type="button" class="btn btn-primary" data-toast='{"title":"Saved","text":"Your changes are live.","tone":"success"}'>Show a toast</button>