Avatars
Avatar is used to represent a user, and display their profile picture or initials.
Image avatars
You can use the image of the user in image avatar. You need to include avatar class and add size class (avatar-L, avatar-S) according to your size requirements. Regular size is set as default for avatar class.
Refer the below code to use different variations of image avatars. Make changes as per your requirements.
<figure class="avatar avatar-L">
<img
class="img-responsive img-round"
src="../../Assets/avatar-male.jpg"
alt="avatar"
/>
</figure>
<figure class="avatar">
<img
class="img-responsive img-round"
src="../../Assets/avatar-female.jpg"
alt="avatar"
/>
</figure>
<figure class="avatar avatar-S">
<img
class="img-responsive img-round"
src="../../Assets/avatar-dog.jpg"
alt="avatar"
/>
</figure>
Text avatars
You can use the initials of the user in text avatar. You need to include avatar class and add size class (avatar-L, avatar-S) according to your size requirements. Regular size is set as default for avatar class.
Refer the below code to use different variations of text avatars. Make changes as per your requirements.
<div class="avatar-text flex-center avatar-L">
<strong>TS</strong>
</div>
<div class="avatar-text flex-center avatar">
<strong>TS</strong>
</div>
<div class="avatar-text flex-center avatar-S">
<strong>TS</strong>
</div>