Users

Users covers the small things that stand for a person or a team: a round avatar with a photo or initials, a square one for a group, and a suggestion list for picking either of them.

Use an avatar next to a name, a comment or a task to show at a glance who it belongs to. An avatar never replaces the name: add it as text beside the avatar, or as a title and alt text when there is no room.

Give a wrapper the class user-avatar and put an <img> inside it. The image is cropped to a circle of 1.8em, so it follows the size of the text around it.

When there is no photo, use an element with the class no-avatar holding the initials, or an icon. It is drawn as a blue circle with white text in every theme.

<span class="user-avatar">
  <img src="arete.png" alt="Arete">
</span>

<span class="user-avatar">
  <span class="no-avatar" title="Laodamas of Scheria">LS</span>
</span>

<span class="user-avatar">
  <span class="no-avatar" title="Unknown user">
    <svg class="icon"><use xlink:href="/images/icons.svg#user"></use></svg>
  </span>
</span>

The outline darkens when the avatar is hovered, which suits an avatar that is a link to a profile. Add the class hover to show that state yourself, for example on the avatar of the person who is selected.

Say who it is: give a photo an alt text with the name. Initials alone mean little to a screen reader, so put the full name next to them or in a title.

Use group-avatar instead of user-avatar for a team, a department or any other group. It works the same way, with slightly rounded corners instead of a circle, so people and groups can be told apart in one list.

<span class="group-avatar">
  <span class="no-avatar" title="Acquisitions">AQ</span>
</span>
Acquisitions

To let someone pick a person or a group, add the class user-suggestions to a suggestions field. Its panel gets a row of tabs, display-list-toggle, to switch between two lists, and a list of results below it. Mark the tab that is showing with the class active. The panel opens when the field has focus; it is shown open here.

<div class="suggestions user-suggestions">
  <input type="text" placeholder="Assign to..." aria-label="Assign to">

  <div class="panel">
    <div class="display-list-toggle">
      <a href="..." class="active">People</a>
      <a href="...">Groups</a>
    </div>

    <ul>
      <li>
        <a href="...">
          <span class="user-avatar"><span class="no-avatar">N</span></span>
          Nausicaä
        </a>
      </li>
      ...
    </ul>
  </div>
</div>

Nausikaä only styles the panel. Filtering the list while someone types, and switching between the two tabs, takes a script of your own.