Avatar
An avatar represents a unique entity, like a person, group, or project. Use an avatar to consistently represent a person, group, or project where the visual or semantic relationship provides context to the content it’s in proximity to.
How to use
To convert any image into avatar just add avatar
class to the HTML tag.
Available sizes
The size of avatar depend on its context. Available sizes are 16, 32, 64, 96 and 128px
which can be easily accessed by using avatar-size-(1-5)
as class, where 1 is smallest and 5
is largest.
Examples
Examples for circle avatar.
Examples for square avatar. To use simply add avatar-square-sm
class for 5px border radius.
Examples for square avatar. To use simply add avatar-square-md
class for 10px border radius.
Examples for square avatar. To use simply add avatar-square-lg
class for 15px border radius.
Examples for name initials avatar.