Avatars — DR.Simple

Sizes and fallbacks

Three sizes: .avatar-sm, the default, and .avatar-lg. Inside, an <img>, initials, or a Remix Icon, in that order of preference.

.avatar--muted is for an actor with no person behind it — a service account, a runner, an unknown sender. The brand tint stays for people, so a page of rows does not read as uniformly branded.

An avatar is never the only carrier of a name. Put the name in text beside it, in an alt, or in a .visually-hidden span. Initials are not a name, and a title tooltip is reachable by neither keyboard nor touch.

JW JW JW

JW Jordan Weiss

<div class="dr-col">
    <div class="dr-row dr-gap-2">
        <span class="avatar avatar-sm">JW</span>
        <span class="avatar">JW</span>
        <span class="avatar avatar-lg">JW</span>
        <span class="avatar avatar--muted"><i class="ri-server-line"></i></span>
        <span class="avatar"><i class="ri-user-line"></i></span>
    </div>
    <div class="dr-row">
        <span class="avatar avatar-sm">JW</span>
        <span>Jordan Weiss<span class="visually-hidden">, assignee</span></span>
    </div>
</div>

Group

Overlapping, for “these several people”. The gap between them is a hole masked out of the avatar behind, so the group is correct on any surface — a card, the page, a selected table row — without being told which one it is on.

The overlap and the gap come from --avatar-size, --avatar-overlap and --avatar-gap, so a size variant sets two numbers and the geometry follows. .avatar-more is the counter and is deliberately not an avatar: it is a number, and the brand tint would make it look like one more person.

JW PN MK +3

JW PN MK +8

JW PN

<div class="dr-col">
    <div class="avatar-group">
        <span class="avatar">JW</span>
        <span class="avatar">PN</span>
        <span class="avatar">MK</span>
        <span class="avatar avatar--muted"><i class="ri-server-line"></i></span>
        <span class="avatar-more">+3</span>
    </div>
    <div class="avatar-group">
        <span class="avatar avatar-sm">JW</span>
        <span class="avatar avatar-sm">PN</span>
        <span class="avatar avatar-sm">MK</span>
        <span class="avatar-more">+8</span>
    </div>
    <div class="avatar-group">
        <span class="avatar avatar-lg">JW</span>
        <span class="avatar avatar-lg">PN</span>
        <span class="avatar avatar-lg avatar--muted"><i class="ri-user-line"></i></span>
    </div>
</div>

Name with a subtext

An avatar, a name and a second line, with something trailing. There is no .person class for this: it is .list-row with .list-main, .list-title, .list-sub and .list-meta — the same lockup Collections documents, which names nothing about people and so serves a device or a service account too.

The subtext is whatever identifies the row a second time: an address, an id, a role, a last seen. .list-title and .list-sub both truncate, and .list-main carries the min-width: 0 that lets them.

JW Jordan Weiss jordan.weiss@example.com Active
PN Priya Nair priya.nair@example.com Invited
build-runner-04 Service account · no sign-in System

<ul class="list" style="max-width:520px">
    <li>
        <span class="list-row">
            <span class="avatar">JW</span>
            <span class="list-main">
                <span class="list-title">Jordan Weiss</span>
                <span class="list-sub">jordan.weiss@example.com</span>
            </span>
            <span class="list-meta"><span class="badge badge-go">Active</span></span>
        </span>
    </li>
    <li>
        <span class="list-row">
            <span class="avatar">PN</span>
            <span class="list-main">
                <span class="list-title">Priya Nair</span>
                <span class="list-sub">priya.nair@example.com</span>
            </span>
            <span class="list-meta"><span class="badge">Invited</span></span>
        </span>
    </li>
    <li>
        <span class="list-row">
            <span class="avatar avatar--muted"><i class="ri-server-line"></i></span>
            <span class="list-main">
                <span class="list-title">build-runner-04</span>
                <span class="list-sub">Service account &middot; no sign-in</span>
            </span>
            <span class="list-meta"><span class="badge badge-info">System</span></span>
        </span>
    </li>
</ul>

In a table cell

.list-row--flush drops the row's own padding for the places that already provide it — a table cell, a card header, a form row.

The access column is .value-trigger: a control showing a current value that opens a menu to change it. It is quieter than a button and does not pretend to be a field. Use it where a <select> would be wrong because the options need icons or a description; where a plain list of values would do, use a <select>.

Member	Access	Last seen
JW Jordan Weiss jordan.weiss@example.com		4 min ago
PN Priya Nair priya.nair@example.com		2 days ago

<div style="padding-bottom:150px">
<div class="dr-scroll-x" tabindex="0" role="group" aria-label="Team members">
<table class="table">
    <thead>
        <tr><th>Member</th><th>Access</th><th class="col-num">Last seen</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span class="list-row list-row--flush">
                    <span class="avatar avatar-sm">JW</span>
                    <span class="list-main">
                        <span class="list-title">Jordan Weiss</span>
                        <span class="list-sub">jordan.weiss@example.com</span>
                    </span>
                </span>
            </td>
            <td>
                <div class="menu-anchor">
                    <button class="value-trigger" type="button" data-menu-toggle aria-expanded="false">
                        <span>Maintainer</span>
                    </button>
                    <div class="menu" hidden>
                        <span class="menu-label">Access level</span>
                        <button class="menu-item" type="button"><i class="ri-eye-line"></i> Viewer</button>
                        <button class="menu-item" type="button"><i class="ri-git-pull-request-line"></i> Contributor</button>
                        <button class="menu-item" type="button"><i class="ri-shield-star-line"></i> Maintainer</button>
                    </div>
                </div>
            </td>
            <td class="col-num col-muted">4 min ago</td>
        </tr>
        <tr>
            <td>
                <span class="list-row list-row--flush">
                    <span class="avatar avatar-sm">PN</span>
                    <span class="list-main">
                        <span class="list-title">Priya Nair</span>
                        <span class="list-sub">priya.nair@example.com</span>
                    </span>
                </span>
            </td>
            <td>
                <div class="menu-anchor">
                    <button class="value-trigger" type="button" data-menu-toggle aria-expanded="false">
                        <span>Viewer</span>
                    </button>
                    <div class="menu" hidden>
                        <span class="menu-label">Access level</span>
                        <button class="menu-item" type="button"><i class="ri-eye-line"></i> Viewer</button>
                        <button class="menu-item" type="button"><i class="ri-git-pull-request-line"></i> Contributor</button>
                        <button class="menu-item" type="button"><i class="ri-shield-star-line"></i> Maintainer</button>
                    </div>
                </div>
            </td>
            <td class="col-num col-muted">2 days ago</td>
        </tr>
    </tbody>
</table>
</div>
</div>