<section class="section section-tokens" aria-labelledby="lists-heading">
  <h2 id="lists-heading">Lists</h2>

  <h3>Default list</h3>
  <ul class="list">
    <li class="list-item is-active">
      <span class="list-item-icon"><i class="ph ph-house"></i></span>
      Dashboard
      <span class="list-item-meta">24</span>
    </li>
    <li class="list-item">
      <span class="list-item-icon"><i class="ph ph-user"></i></span>
      Profile
    </li>
    <li class="list-item is-disabled">
      <span class="list-item-icon"><i class="ph ph-gear"></i></span>
      Settings
    </li>
  </ul>

  <h3>Compact divided list</h3>
  <ul class="list list-compact list-divided">
    <li class="list-item">Inbox</li>
    <li class="list-item">Sent</li>
    <li class="list-item">Drafts</li>
  </ul>
</section>