Avatar
Avatar는 특정 그룹 혹은 사용자를 대표하는 셀래강으로, Zoomable Design System에서는 Square와 Circle Type으로 사용합니다.
Anatomy
1. Avatar Label
2. Circle Container
3. Square Container
4. Text Label
Usage
Avatar의 Type이 형태적인 기준으로 2가지로 분류가 되며, 각각의 Type은 다른 종류의 요소를 대표하는 역할로서 서로 별개의 용도로 사용되어야 합니다.
| Component | Type | Usage | Used |
D | Square | 그룹(organization)을 대표하는 썸네일로 사용합니다. | Farm, Fleet |
A | Circle | 개인(person)을 대표하는 썸네일로 사용합니다. | User |
Design Spec
| Property | Values | Default |
| Size | 36px (Large) / 32px (Medium) / 24px (Small) | 32px (Medium) |
| Image | Image / Empty | Empty |
| State | Default / Disabled | Default |
Size
아래와같이 사용 가능 목록들 총 3가지에 Avatar 사이즈를 제공하고 있습니다.
Color
Avatar의 Image Empty 상태의 배경을 총 5가지이며, 랜덤으로 배정 되는 것을 원칙으로 합니다. 기존의 Color Palette에서 Blue, Green, Yellow, Red 그리고 Gray Color의 200, 700값의 조합으로 사용 합니다.
