Basic CSS for an avatar and how to display it in different styles?
Based on Bootstrap, there are some elcom Platform styles for an avatar, including:
Add the .avatarCircle class to the <img> element to have the circle avatar style.
This style is useful in case you want to display a square picture as a circle one. For example: User avatar for the main activity sharing.
.avatarMedium class to the <a> element that includes <img> to have the rounded corner avatar style.
This style is set as default for avatars with different size.
.avatarLargeWithBorder class to the <img> element to have the rounded corner avatar with border style.
It is used to make an avatar more clear and formal.
| Sample | Title | Class | Description |
|---|---|---|---|
| |
xLarge | avatarXLarge |
120x120px - radius: 4px-4px-4px-4px |
| |
xLarge | avatarLarge |
100x100px - radius: 4px-4px-4px-4px |
| xMedium | avatarXMedium |
75x75px - radius: 3px-3px-3px-3px | |
| Medium | avatarMedium |
50x50px - radius: 3px-3px-3px-3px | |
| xSmall | avatarXSmall |
36x36px - radius: 2px-2px-2px-2px | |
| Small | avatarSmall |
26x26px - radius: 2px-2px-2px-2px | |
| xMini | avatarXMini |
20x20px - radius: 2px-2px-2px-2px | |
| Mini | avatarMini |
16x16px - radius: 2px-2px-2px-2px |
