Members

<div class="list">
  <ul>
    <li>
      <a href="…">
        <span class="avatar">
          <img height="30" width="30" alt="" src="…" />
        </span>
        <h3>@brian</h3>
        <p>Brian Nilsen</p>
        <p class="role">Group Curator</p>
      </a>
      <a href="…" class="message">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <switch><use xlink:href="#icon-note"></use><foreignObject>Mention</foreignObject></switch>
        </svg>
      </a>
    </li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
  </ul>
</div>

Members (curator view)

This list has option buttons instead of the usual mention buttons.

<div class="list">
  <ul>
    <li>
      <a href="…">
        <span class="avatar">
          <img height="30" width="30" alt="" src="…" />
        </span>
        <h3>@brian</h3>
        <p>Brian Nilsen</p>
        <p class="role">Group Curator</p>
      </a>
      <p class="action">
        <a href="…">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-more"></use><foreignObject>Options</foreignObject></switch>
          </svg>
        </a>
      </p>
    </li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
  </ul>
</div>

Examples