아바타

목록에서 이게 누구의 것인지 얼굴이나 이름 첫 글자로 빠르게 집어내야 할 때 쓰는 조각.

실제 미리보기

출처

HTML CSS

<div class="dc-avatar-row">
  <span class="dc-avatar" aria-hidden="true">김</span>
  <span class="dc-avatar__name"><strong>김도현</strong>현장 관리자 · 3공구</span>
</div>

.dc-avatar-row {
  display: flex; align-items: center; gap: var(--dc-3);
  font-family: var(--dc-font);
}
.dc-avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
  font-family: var(--dc-font); font-size: 15px; font-weight: 700; line-height: 1;
  overflow: hidden; user-select: none;
}
.dc-avatar--muted { background: var(--dc-sunken); color: var(--dc-text-sub); }
.dc-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.dc-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.dc-avatar__name {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--dc-text-mute);
}
.dc-avatar__name strong { font-size: 14px; color: var(--dc-text); }
.dc-avatar-group { display: flex; align-items: center; padding-left: 10px; }
.dc-avatar-group .dc-avatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar-wrap { position: relative; display: inline-block; }
.dc-avatar__status {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: var(--dc-r-full);
  background: var(--dc-ok);
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar__status--off { background: var(--dc-text-mute); }

이렇게 씁니다

사진이 없으면 이름 첫 글자로 채운다 — 빈 원을 두지 않는다
옆에 이름이 적혀 있으면 아바타는 aria-hidden 으로 숨겨 두 번 읽지 않게 한다
겹쳐 놓을 때는 바탕색 테두리로 경계를 만들고 나머지는 숫자로 접는다

주의할 점

아바타만으로 사람을 구분하게 하지 마라 — 이름이나 aria-label 이 늘 같이 있어야 한다
상태 점은 색만 다르게 두지 말고 무슨 상태인지 dc-sr 로 적어라

다음에 볼 것