Blaze UI Avatars Initials

Last Updated : 28 Apr, 2022

Blaze CSS is Framework-free open source UI toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. It is responsive in nature, as all the components are developed mobile-first and work on any screen size.

An avatar is an important component in any website that is useful for chat UIs, profile pictures, and account photos. An avatar provides an amazing look to the User-Interface. The Blaze UI provides us the functionality of creating an Avatar with Initials displayed on it. This component is known as the Avatar Initials.

Blaze UI Avatars Initials Class:

c-avatar: This class is used to create an Avatar.

Syntax:

<!-- Write the initials that have to be displayed -->
<div class="c-avatar" ... data-text="...">
</div>

Example 1: The following example demonstrates the use of the c-avatar class to create Avatar Initials.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> Blaze UI Avatars Initials </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Avatars Initials 
        </div> 
    </h1> 
    <br> 
      
    <div class="c-avatar" data-text="AB"> 
        <!--Avatar Initials-->
    </div> 
    <div class="c-avatar" data-text="SN"> 
    </div> 
    <div class="c-avatar" data-text="WWE"> 
    </div> 
    <div class="c-avatar" data-text="VB"> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: The following example demonstrates the use of the c-avatar class to create Avatar Initials of various sizes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> Blaze UI Avatars Initials </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Avatars Initials 
        </div> 
    </h1> 
    <br> 
      
    <div class="c-avatar c-avatar u-super" data-text="AB"> 
        <!--Avatar Initials Super Size-->
    </div> 
    <div class="c-avatar c-avatar u-xlarge" data-text="SN"> 
        <!--Avatar Initials Xlarge Size-->
    </div> 
    <div class="c-avatar c-avatar u-large" data-text="WWE"> 
        <!--Avatar Initials Large Size-->
    </div> 
    <div class="c-avatar c-avatar u-small" data-text="VB"> 
        <!--Avatar Initials Small Size-->
    </div> 
</body> 
  
</html> 