Some experiments with simple employee lists within BrightHR, demonstrating different treatments, and showing compact versus higher detail views.

Avatar variants

An avatar component consists of 4 main variant groups; size, shape, status, and picture. Size is relatively easy to grasp, just small (32px), medium (56px), large (96px), and x-large (144px). Shape comes in two form factors; round and square (well, more of a squircle). Status is adds a coloured border around the avatar image, indicating whether an employee is currently available (green), unavailable (red), or unknown (blank). Lastly, a picture boolean can switch between an image or initials based upon the users first and last names.