1. Docs
  2. Components
  3. Avatars
Buy Now Contact

Avatars

Basic styles for images to be used as avatars.

Adam

<div class="c-avatar c-avatar--xlarge">
    <img class="c-avatar__img" src="/img/avatar.jpeg" alt="Adam">
</div>

Size Variations

Define avatar’s size by using one the modifier classes: c-avatar--xsmall, c-avatar--small, c-avatar--medium, c-avatar--large or c-avatar--xlarge.


<div class="c-avatar c-avatar--xsmall">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>

<div class="c-avatar c-avatar--small">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>

<div class="c-avatar c-avatar--medium">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>

<div class="c-avatar c-avatar--large">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>

<div class="c-avatar c-avatar--xlarge">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>


Avatar with dropdown

Add a small arrow to the avatar by adding has-dropdown class. This is useful when you use avatar as a dropdown toggle.


<div class="c-avatar c-avatar--xlarge has-dropdown">
    <img class="c-avatar__img" src="http://i.pravatar.cc/150?img=68">
</div>