Design
Implementation

Avatar - Design

Avatar is used to show the users profile picture

 

Live Demo

Go to Code
Profile Avatar
 

Usage

The avatar component should be used in places where the users avatar is to be displayed.

 

Anatomy

Avatar Anatomy
1. Image

 

Behavior

Inline element that has a height and width of 64px.

Avatar - Implementation

Avatar is used to show the users profile picture

 

Basic Avatar

This is what the implementation of an avatar would look like. Below is the HTML and CSS, as well as an example of what the code will produce. 

<div class="avatar">
    <img alt="Profile Avatar" class="avatar__image" decoding="async" loading="lazy" src="/image-big.jpg" srcset="/image-small.jpg 480w, /image-medium.jpg 800w, /image-big.jpg 1200w" />
</div>
Profile Avatar
.avatar {
    display: flex;
}

.avatar__image {
    background-color: #dadce0;
    border-radius: 50%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 64px;
    margin: 0 12px 0 0;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    width: 64px;
}
Contents
Live Demo Usage Anatomy Behavior
Basic Avatar