Avatars

Basic styles for images to be used as avatars.


<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>