Presence indicator

<div class="container">
<!-- Other element such as avatar -->
...
<!-- The presence indicator -->
<div class="container__indicator"></div>
</div>
.container {
position: relative;
}
.container__indicator {
/* Shown at the bottom right corner */
bottom: 0,
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* Background color */
background-color: #FF4136;
}

See also

Avatar

1
2
3

Avatar list

Docked at corner

PN

Initial avatar