List

The list (.list) is a vertical collection of rows — used for settings menus, activity feeds, search results, and any other "one row per item" layout. It renders on a <ul> (or <ol>) with list styling stripped, and each row is a .list-item that can be a plain <div>, an <a>, or a <button> — the CSS adds hover and focus-visible styling automatically for the two interactive tags.

Build pipeline Passed in 4m 12s
1h

<ul class="list" aria-label="Recent activity">
  <li>
    <div class="list-item">
      <span class="list-item-leading" aria-hidden="true">✅</span>
      <div class="list-item-content">
        <span class="list-item-headline">Build pipeline</span>
        <span class="list-item-supporting">Passed in 4m 12s</span>
      </div>
      <span class="list-item-trailing">1h</span>
    </div>
  </li>
</ul>