• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

This sample demonstrates the integration of avatar component with badges to create notification avatars.

DEMO
SOURCE
profile_pic
6
profile_pic
12
profile_pic
46
profile_pic
82
profile_pic
99+
profile_pic
6
profile_pic
12
profile_pic
46
profile_pic
82
profile_pic
99+

The Avatar can be used with badges to have notification to indicate the new activities. The container needs to position: relative to achieve the notifications styled avatar. In this sample, the wrapper is applied with position: relative with avatar and badge elements inside it.

Since the avatar is a supportive and dependent component it can be used in many ways and can have wide variety of use-case.