Avatar

Avatars are used to represent a person or object to give them a visual identity. It gives user and objects a digital identity.

Images Avatar

Images avator can be created using class .avatar on img. Also, add alt for images.

expand_more

<img
  src="Your-img-url.png"
  alt="avatar"
  class="avatar"
/>

Initials Avatar

When you don't have an image to use then, you can also add your initials using a class called .avatar--initial.

expand_more

<div class="avatar avatar--initial">
  <p>SK</p>
</div>
<div class="avatar avatar--large avatar--initial">
  <p>SK</p>
</div>    

Sizes Avatar

Avatars can be sized using classes .avatar--small, .avatar--medium and .avatar--large. Along with .avatar class use these classes to get desired shape.

expand_more

<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--small"
/>
<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--medium"
/>
<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--large"
/>   

Shapes Avatar

Give your avatars custom shapes using classes .avatar--square, .avatar--roundedand .avatar--circle.

expand_more

<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--square"
/>

<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--rounded"
/>

<img
    src="Your-img-url.png"
    alt="avatar"
    class="avatar avatar--circle"
/>   