Super UI
Avatar
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
Example of Image Avatar
Avatar is available in 5 different sizes. You can use image in Avatar. You need to include class avatar and for size add class according to size avatar-xl, avatar-lg, avatar-md, avatar-sm, avatar-xs (e.g. class="avatar avatar-lg") Don't forget to add Responsive Image class names for img element.
| <div class="avatar avatar-xl"> | |
| <img | |
| class="img-responsive img-round" | |
| src="/assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| </div> | |
| <div class="avatar avatar-lg"> | |
| <img | |
| class="img-responsive img-round" | |
| src="/assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| </div> | |
| <div class="avatar avatar-md"> | |
| <img | |
| class="img-responsive img-round" | |
| src="/assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| </div> | |
| <div class="avatar avatar-sm"> | |
| <img | |
| class="img-responsive img-round" | |
| src="/assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| </div> | |
| <div class="avatar avatar-xs"> | |
| <img | |
| class="img-responsive img-round" | |
| src="/assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| </div> |
Example of Avatar Text
Avatar is available in 5 different sizes. You can use text in Avatar. You need to include class avatar , avatar-text and for size add class according to size avatar-text-xl, avatar-text-lg, avatar-text-md, avatar-text-sm, avatar-text-xs (e.g. class="avatar avatar-text avatar-text-lg")
| <div class="avatar avatar-text avatar-text-xl">PS</div> | |
| <div class="avatar avatar-text avatar-text-lg">PS</div> | |
| <div class="avatar avatar-text avatar-text-md">PS</div> | |
| <div class="avatar avatar-text avatar-text-sm">PS</div> | |
| <div class="avatar avatar-text avatar-text-xs">PS</div> |