Avatar

An 'avatar' is a small image that you can add to your profile. It can be a photo of you or of any other image that you want.

Hydrogen provides two type of avatars viz. image, and text with four different sizes which are large, medium, small and extra small.

Image Avatar

You can use avatar class with contextual classes to add size to the avatars. For example, if you want an image avatar of medium size you can use class="avatar avatar-md. By default avatars are shaped as circle. Don't forget to add img-responsive and img-round class to img element.

Round Image Avatar

avatar
avatar
avatar
avatar
<!-- large avatar -->
<figure class="avatar avatar-lg">
<img
class="img-responsive img-round"
src="../assets/avatar-girl.jpg"
alt="avatar"
/>
</figure>
<!-- medium avatar -->
<figure class="avatar avatar-md">
<img
class="img-responsive img-round"
src="../assets/avatar-girl.jpg"
alt="avatar"
/>
</figure>
<!-- small avatar -->
<figure class="avatar avatar-sm">
<img
class="img-responsive img-round"
src="../assets/avatar-girl.jpg"
alt="avatar"
/>
</figure>
<!-- extra small avatar -->
<figure class="avatar avatar-xs">
<img
class="img-responsive img-round"
src="../assets/avatar-girl.jpg"
alt="avatar"
/>
</figure>
view raw image-avatar.html hosted with ❤ by GitHub

Square Image Avatar

Use avatar-sq class to make avatar square.

avatar
avatar
avatar
avatar
<!-- large avatar -->
<figure class="avatar-sq avatar-lg">
<img class="img-responsive" src="../assets/avatar-boy.jpeg" alt="avatar" />
</figure>
<!-- medium avatar -->
<figure class="avatar-sq avatar-md">
<img class="img-responsive" src="../assets/avatar-boy.jpeg" alt="avatar" />
</figure>
<!-- small avatar -->
<figure class="avatar-sq avatar-sm">
<img class="img-responsive" src="../assets/avatar-boy.jpeg" alt="avatar" />
</figure>
<!-- extra small avatar -->
<figure class="avatar-sq avatar-xs">
<img class="img-responsive" src="../assets/avatar-boy.jpeg" alt="avatar" />
</figure>
view raw square-avatar.html hosted with ❤ by GitHub

Text Avatar

In text avatar you can use initials of the user or their first or last name. You need to add avatar-text class along with the size contextual classes.

Junaid
JS
Shaikh
AB
<div class="avatar-text avatar-lg">
<span>Junaid</span>
</div>
<div class="avatar-text avatar-md">
<span>Junaid</span>
</div>
<div class="avatar-text avatar-sm">
<span>Junaid</span>
</div>
<div class="avatar-text avatar-xs">
<span>Junaid</span>
</div>
view raw text-avatar.html hosted with ❤ by GitHub
Alert Badge