G-Loot DS — avatar status

by Augustin Hiebel

HTML

<!-- Success (default) -->
 <div className="avatar avatar-circle">
   <div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_6.jpg" alt="avatar" />
   </div>
   <i />
 </div>

 <!-- Disabled -->
 <div className="avatar avatar-circle">
   <div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_6.jpg" alt="avatar" />
   </div>
   <i className="disabled" />
 </div>

 <!-- Error -->
 <div className="avatar avatar-circle">
   <div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_6.jpg" alt="avatar" />
   </div>
   <i className="error" />
 </div>

 <!-- Attention -->
 <div className="avatar avatar-circle">
   <div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_6.jpg" alt="avatar" />
   </div>
   <i className="attention" />
 </div>

 <!-- Radar -->
 <div className="avatar avatar-circle">
   <div>
     <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_6.jpg" alt="avatar" />
   </div>
   <i className="radar" />
 </div>