Blaze UI Avatars

Last Updated : 05 May, 2022

Blaze UI is a free and open-source user interface toolkit that provides a strong foundation to build maintainable and scalable websites. All of its components are developed mobile-first and are fully responsive which works on devices of any screen size.

In this article, we will be seeing Blaze UI Avatars. Avatar component is generally used for chat UIs, profile pictures, or account photos of users in modern web applications. To use Avatars we can use the <blaze-avatar> element provided by Blaze UI or we can use the classes to use the avatar component.

Blaze UI Avatars Classes:

c-avatar: This class is the wrapper of the avatar component.
c-avatar__img: This class is used on the avatar image. This should be a direct child of the c-avatar class.

Blaze UI Avatars Attributes:

data-text: This attribute is used to set the text in the avatar component. It is not applicable when we use the <blaze-avatar> element.
src: This attribute is used with the <blaze-avatar> element to set the URL for the primary image to display.
src-2: This attribute is used with the <blaze-avatar> element to set the URL for the secondary image to display.
alt: This attribute is used with the <blaze-avatar> element to set alternative text to the primary image.
alt-2: This attribute is used with the <blaze-avatar> element to set alternative text to the secondary image.
size: This attribute is used with the <blaze-avatar> element to set the size of the avatar.
text: This attribute is used with the <blaze-avatar> element to set text to display inside the avatar.

Syntax:

With <blaze-avatar> component

<blaze-avatar 
    size="small"
    alt="..."
    src="..."
    alt-2="..."
    src-2="...">
</blaze-avatar>

With Pure CSS

<div class="c-avatar u-small">
  <img class="c-avatar__img" src="...">
</div>

Example 1: This example shows the use of the <blaze-avatar> element to make use of the Avatar component.

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 - Avatar </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
  
        .wrapper { 
            display: flex; 
            align-items: center; 
            justify-content: space-evenly; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">  
            GeeksforGeeks 
        </h2> 
          
        <h3> Avatar- Blaze UI </h3> 
    </div> 
  
    <div class="wrapper u-window-box-super"> 
  
        <!-- Blaze UI super sized avatar  
            element initials in it -->
        <blaze-avatar size="super" text="VP"></blaze-avatar> 
  
        <!-- Blaze UI extra large avatar element with  
            primary image and secondary image -->
        <blaze-avatar size="xlarge" alt="gfg_profile"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary"> 
        </blaze-avatar> 
  
        <!-- Blaze UI large sized avatar element with  
                primary image and secondary image -->
        <blaze-avatar size="large" alt="gfg_profile"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary"> 
        </blaze-avatar> 
  
        <!-- Blaze UI medium sized avatar element with  
                primary image and secondary image -->
        <blaze-avatar size="medium" alt="gfg_profile"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary"> 
        </blaze-avatar> 
  
        <!-- Blaze UI small sized avatar element with  
                primary image and secondary image -->
        <blaze-avatar size="small" alt="gfg_profile"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary"> 
        </blaze-avatar> 
  
        <!-- Blaze UI extra small sized avatar element  
                with primary image and secondary image -->
        <blaze-avatar size="xsmall" alt="gfg_profile"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary"> 
        </blaze-avatar> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Avatars using <blaze-avatar> element

Example 2: This example shows the use of CSS classes to make use of the Blaze UI Avatar component.

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 - Avatar </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <!-- We do not need blaze UI javascript as  
        we are using only css classes of avatar component -->
    <style> 
        body { 
            font-family: sans-serif; 
        } 
        .wrapper { 
            display: flex; 
            align-items: center; 
            justify-content: space-evenly; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">  
            GeeksforGeeks  
        </h2> 
          
        <h3> CSS Only Avatar - Blaze UI </h3> 
    </div> 
  
    <div class="wrapper u-window-box-super"> 
  
        <!-- Blaze UI super sized avatar element initials  
                in it using "data-text" attribute -->
        <div class="c-avatar u-super" data-text="GFG"></div> 
  
        <!-- Blaze UI extra large avatar element with  
                primary image and secondary image -->
        <div class="c-avatar u-xlarge"> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            /> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            /> 
        </div> 
  
        <!-- Blaze UI large sized avatar element with  
                primary image and secondary image -->
        <div class="c-avatar u-large"> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            /> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            /> 
        </div> 
  
        <!-- Blaze UI medium sized avatar element with  
                primary image and secondary image -->
        <div class="c-avatar u-medium"> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            /> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            /> 
        </div> 
  
        <!-- Blaze UI small sized avatar element with  
                primary image and secondary image -->
        <div class="c-avatar u-small"> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            /> 
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            /> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Avatars with Pure CSS

Example 3: This example illustrates how to make Avatar using a single image and two images.

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 - Avatar</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
  
        .wrapper { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">  
            GeeksforGeeks  
        </h2> 
          
        <h3> Avatar - Blaze UI </h3> 
    </div> 
  
    <div class="wrapper u-window-box-super"> 
  
          
<p><b> Avatars Using Single Image </b></p> 
  
        <div> 
            <!-- Blaze UI extra large avatar  
                    element with single image -->
            <blaze-avatar size="xlarge" alt="gfg_profile"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"> 
            </blaze-avatar> 
              
            <!-- Blaze UI large sized avatar  
                element with single image -->
            <blaze-avatar size="large" alt="gfg_profile"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"> 
            </blaze-avatar> 
        </div> 
  
          
<p><b> Avatars Using Two Image </b></p> 
  
        <div> 
            <!-- Blaze UI extra large avatar  
                element with two images -->
            <blaze-avatar size="xlarge" alt="gfg_profile"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
                src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
                alt-2="gfg_profile_secondary"> 
            </blaze-avatar> 
              
            <!-- Blaze UI large sized avatar  
                element with two images -->
            <blaze-avatar size="large" alt="gfg_profile"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
                src-2= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
                alt-2="gfg_profile_secondary"> 
            </blaze-avatar> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Avatar using a single image and two images

Example 4: This example illustrates the use of the Blaze UI Avatar element with 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 - Avatar </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
  
        .wrapper { 
            display: flex; 
            justify-content: space-evenly; 
            align-items: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">  
            GeeksforGeeks  
        </h2> 
        <h3>  
            Avatar - Using Initials - Blaze UI  
        </h3> 
    </div> 
  
    <div class="wrapper u-window-box-super"> 
        <!-- Super sized avatar initials in it -->
        <blaze-avatar size="super" 
                      text="VP"> 
        </blaze-avatar> 
  
        <!-- Extra large sized avatar initials in it -->
        <blaze-avatar size="xlarge" 
                      text="AM"> 
        </blaze-avatar> 
  
        <!-- Large sized avatar initials in it -->
        <blaze-avatar size="large" 
                      text="PM"> 
        </blaze-avatar> 
  
        <!-- Small sized avatar initials in it -->
        <blaze-avatar size="small" 
                      text="PR"> 
        </blaze-avatar> 
  
        <!-- Extra small sized avatar initials in it -->
        <blaze-avatar size="xsmall" 
                      text="BM"> 
        </blaze-avatar> 
    </div> 
</body> 
  
</html>