ActivityFeed

<section class="af-card" aria-labelledby="afTitle">
  <h2 id="afTitle" class="af-title">Recent activity</h2>
  <ul class="af-list">
    <li class="af-item">
      <span class="af-dot af-dot--ok" aria-hidden="true">●</span>
      <div class="af-body">
        <p class="af-text">Invoice INV-302 paid by Acme Co.</p>
        <p class="af-meta">2 minutes ago</p>
      </div>
    </li>
    <li class="af-item">
      <span class="af-dot af-dot--info" aria-hidden="true">●</span>
      <div class="af-body">
        <p class="af-text">3 seats added to Team plan.</p>
        <p class="af-meta">15 minutes ago</p>
      </div>
    </li>
    <li class="af-item">
      <span class="af-dot af-dot--warn" aria-hidden="true">●</span>
      <div class="af-body">
        <p class="af-text">Payment retry scheduled for Northwind.</p>
        <p class="af-meta">1 hour ago</p>
      </div>
    </li>
  </ul>
</section>