Components / New
Avatar
Represents a person in a connection. Use a photo when there is one, and initials on a brand color when there isn't.연결 속의 사람을 나타냅니다. 사진이 있으면 사진을, 없으면 브랜드 색 위에 이니셜을 씁니다.
Sizes & colors크기와 색상
Group: people coming together그룹: 함께 모인 사람들
Overlapping avatars show a group that has come together. Show up to four and summarize the rest as a count.겹쳐진 아바타는 함께 모인 그룹을 보여 줍니다. 최대 4명까지 보이고 나머지는 숫자로 요약합니다.
Markup
<span class="dy-avatar"><img src="/people/mina.jpg" alt="Mina Kim"></span>
<span class="dy-avatar lime" role="img" aria-label="Jisu Seo">JS</span>
<span class="dy-avatar large" data-status="online" role="img" aria-label="Hana, online">HA</span>
<span class="dy-avatar-group" role="group" aria-label="8 people">
<span class="dy-avatar">DY</span>
<span class="dy-avatar lime">MK</span>
<span class="dy-avatar neutral">+6</span>
</span><span class="dy-avatar"><img src="/people/mina.jpg" alt="김민아"></span>
<span class="dy-avatar lime" role="img" aria-label="서지수">JS</span>
<span class="dy-avatar large" data-status="online" role="img" aria-label="하나, 접속 중">HA</span>
<span class="dy-avatar-group" role="group" aria-label="8명">
<span class="dy-avatar">DY</span>
<span class="dy-avatar lime">MK</span>
<span class="dy-avatar neutral">+6</span>
</span>Usage사용 가이드
A calm fallback차분한 대체 표현
Without a photo, show one or two initials on violet or lime. Keep the same color for the same person.사진이 없으면 바이올렛이나 라임 위에 이니셜 1~2자를 씁니다. 같은 사람에게는 같은 색을 유지합니다.
Don't use random rainbow colors or generic silhouettes that make everyone look alike.무작위 무지개색이나 모두를 똑같아 보이게 하는 실루엣을 쓰지 않습니다.
Pair with a name이름과 함께
Show the name next to the avatar wherever a person is being identified, like a list or comment.목록이나 댓글처럼 사람을 구분해야 하는 곳에서는 아바타 옆에 이름을 함께 보여 줍니다.
Don't rely on initials alone to tell people apart; many people share them.이니셜만으로 사람을 구분하지 않습니다. 같은 이니셜이 많습니다.
Size scale크기 체계
| Size크기 | Use용도 |
|---|---|
| Small / 32px | Dense lists, comments, mentions밀도 높은 목록, 댓글, 멘션 |
| Medium / 40px | Default for lists and headers목록과 헤더의 기본 |
| Large / 56px | Profiles and group summaries프로필과 그룹 요약 |
Initials-only avatars need role="img" and an aria-label with the person's name.이니셜만 있는 아바타에는 role="img"와 이름이 담긴 aria-label이 필요합니다.