Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Border |
Defines the outline around the Avatar, enhancing contrast and visibility. |
|
|
|
2 |
Background |
The inner background area of the Avatar, supporting both icon and initials elements. |
|
|
|
3 |
Content |
Defines the Avatar type: |
|
|
|
4 |
Notification |
Badge component that indicates a notification. |
Yes |
|
|
5 |
Emblem |
An image at the bottom-right, usually representing a property logo. |
|
Yes |
Specification and properties
Variants
The Avatar supports three types of content.
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Initials |
Default Avatar variant. |
|
2 |
Image |
Displays the image uploaded by the user. |
|
3 |
Icon |
Used to represent specific entities. |
Sizing
The Avatar component offers four size options: Small, Medium, Large and Extra Large .
When choosing which one to use in your designs, consider the option that best accommodates your content.
|
Item |
Size |
Value |
|---|---|---|
|
1 |
Small |
32px |
|
2 |
Medium |
40px |
|
3 |
Large |
56px |
|
4 |
Extra Large |
104px |