Components

Avatar

사용자를 나타내는 원형 표식입니다. 사진이 없으면 이니셜을 씁니다.

김

최

최유진

yujin@greenmart.co.kr

코드 보기

<span class="tn-avatar">김</span>
<!-- 사진: <span class="tn-avatar"><img src="…"></span> -->

Variants

이름	설명	미리보기
이니셜	사진 없을 때 성(姓) 1자	김
사진	grayscale → hover 컬러 (userchip 패턴)
User Chip	아바타 + 이름 + 이메일 조합	김최유진

✓ Do

✕ Don't