Avatar

MSK Avatar는 사용자 이미지/이니셜을 표시하는 CSS 전용 primitive입니다. 크기, 상태 점, 겹친 그룹을 지원합니다.

Preview

AWTJDRn

ABC+5

Data API

<span class="msk-ui-avatar"><img src="/u/1.jpg" alt="Jane"></span>
<span class="msk-ui-avatar" data-status="online">WT</span>

<div class="msk-ui-avatar-group">
  <span class="msk-ui-avatar" data-size="sm">A</span>
  <span class="msk-ui-avatar" data-size="sm">B</span>
  <span class="msk-ui-avatar" data-size="sm">+3</span>
</div>

옵션

• data-size: sm / (기본) / lg
• data-status: online / busy
• .msk-ui-avatar-group: 겹쳐 표시

Accessibility

• 이미지에는 alt을 제공합니다. 이미지가 없으면 이니셜 텍스트가 표시됩니다.
• 상태 점은 장식이므로 의미 있는 상태는 텍스트로도 전달하세요.