Avatar

  
    @import url("https://component-hub.netlify.app/avatar");
      
      <link rel="stylesheet" 
        href="https://component-hub.netlify.app/avatar">
  
  

Standard Avatar

The avatar component has 5 sizes, avatar-xl , avatar-lg , avatar-std avatar-sm, and avatar-xs.

  
    <div class="avatar">
      <figure class="avatar avatar-xl">  <img   alt="" src=""/></figure>
      <figure class="avatar avatar-lg">  <img   alt="" src=""/></figure>
      <figure class="avatar avatar-std"> <img   alt="" src=""/></figure>
      <figure class="avatar avatar-sm">  <img   alt="" src=""/></figure>
      <figure class="avatar avatar-xs">  <img   alt="" src=""/></figure>
    </div>
 
  

Avatar with status

Avatars support presence indicators. There are indicators online ,offline and dnd.

    
      <div class="flex">
        <div class="presence">
           <figure class="avatar"> 
            <img alt="" src=""/> <div class="status-online"> </div>
           </figure>
        </div> 
        <div class="presence">
           <figure class="avatar">
            <img alt="" src=""/> <div class="status-offline"> </div> 
           </figure>
        </div>
        <div class="presence">
           <figure class="avatar">
            <img alt="" src=""/> <div class="status-dnd"> </div>
          </figure>
        </div>    
      </div>